在iOS上如果我在e.preventDefault()
上调用touchmove
元素已经滚动时它不会停止滚动。如何取消滚动中间滚动?
下面的代码段会显示它可以阻止初始滚动,但是当用户向下滚动然后向上滚动时,它不会停止滚动到达顶部。
由于stackoverflow不在iOS上运行脚本,所以它也在jsfiddle上:https://jsfiddle.net/ukxzz6f2/5/
var startPosition;
var elementStartPosition;
var $scrollable = $(".scroll-me");
$scrollable.on("touchstart", function(e){
startPosition = e.originalEvent.touches[0].clientY;
elementStartPosition = $scrollable.scrollTop();
});
$scrollable.on("touchmove scroll", function(e){
var scrollUp = (startPosition - e.originalEvent.touches[0].clientY) < 0;
if (scrollUp && $scrollable.scrollTop() <= 0) {
e.preventDefault();
e.stopPropagation();
$scrollable.css("pointer-events", "none");
}
});
.scroll-me {
height: 400px;
background: grey;
-webkit-overflow-scrolling: touch;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-me">
<div style="height: 1000px;">
Tall content
</div>
</div>