在移动safari中有条件地阻止滚动/ touchmove事件 [英] Conditionally block scrolling/touchmove event in mobile safari
问题描述
iOS 5现在允许本机溢出：滚动支持。
我想要做的是禁用 touchmove
但是我似乎无法使用它，除非有'scrollable'类或其子类的元素。这是我一直在下面一起工作：
< html>
< head>
< style>
.scrollable {
height：5em;
overflow-y：scroll;
-webkit-overflow-scrolling：touch;
}
< / style>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script>
< script>
//似乎不工作
var handleMove = function（e）{
if（！$（e.target）.parents（）和andSelf hasClass（'scrollable'））{
e.preventDefault（）;
}
};
document.addEventListener（'touchmove'，handleMove，true）;
< / script>
< / head>
< body>
< div>
如果拖动到这里，不滚动
< / div>
< div class ='scrollable'>
应该是可滚动的，如果你拖动这里
< ul>
< li>和此处< / li>
< li>和此处< / li>
< li>和此处< / li>
< li>和此处< / li>
< li>和此处< / li>
< li>和此处< / li>
< li>和此处< / li>
< li>和此处< / li>
< / ul>
< / div>
如果你拖动到这里，不滚动
< / body>
< / html>
我知道你提出问题已经过了一段时间，但我有同样的问题，我使用你的代码作为解决问题的基础。非常感谢您的灵感。
（Javascript + jQuery）
< script>
var handleMove = function（e）{
var scrollable = false;
var items = $（e.target）.parents（）;
$（items）.each（function（i，o）{
if（$（o）.hasClass（scrollable））{
scrollable = true;
}
}）;
if（！scrollable）
e.preventDefault（）;
};
document.addEventListener（'touchmove'，handleMove，true）;
< / script>
或更少冗长，但最终结果相同（信用J Griffiths）：
< script>
var handleMove = function（e）{
if（$（e.target）.closest（'。scrollable'）。length == 0）{e.preventDefault }
}
document.addEventListener（'touchmove'，handleMove，true）;
< / script>
您还应包括以下META标签。
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，
maximum-scale = 1.0，user-scalable = no ; />
iOS 5 now allows native overflow: scroll support.
What I'd like to do is disable the touchmove event for everything except elements that have the 'scrollable' class or their children.
But I can't seem to get it to work; this is what I've been working with below:
<html>
<head>
<style>
.scrollable {
height: 5em;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// doesn't seem to work
var handleMove = function (e) {
if (!$(e.target).parents().andSelf().hasClass('scrollable')) {
e.preventDefault();
}
};
document.addEventListener('touchmove', handleMove, true);
</script>
</head>
<body>
<div>
don't scroll if you drag here
</div>
<div class='scrollable'>
should be scrollable if you drag here
<ul>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
</ul>
</div>
don't scroll if you drag here
</body>
</html>
I know it's been a while since you asked the question, but I had the same issue and I used your code as the basis for solving the problem. So thanks for the inspiration.
(Javascript + jQuery)
<script>
var handleMove = function (e) {
var scrollable = false;
var items = $(e.target).parents();
$(items).each(function(i,o) {
if($(o).hasClass("scrollable")) {
scrollable = true;
}
});
if(!scrollable)
e.preventDefault();
};
document.addEventListener('touchmove', handleMove, true);
</script>
Or less verbose, but ultimately the same result (credit J Griffiths):
<script>
var handleMove = function (e) {
if($(e.target).closest('.scrollable').length == 0) { e.preventDefault(); }
}
document.addEventListener('touchmove', handleMove, true);
</script>
You should also include the following META tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no;" />
这篇关于在移动safari中有条件地阻止滚动/ touchmove事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
