当元素已经滚动时,在touchmove上调用preventDefault没有效果

时间:2016-08-04 14:16:12

标签: ios safari

在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>

0 个答案:

没有答案