javascript - iOS:禁用弹跳滚动但允许正常滚动

Question

我不希望我的网站内容在用户点击页面边缘时四处晃动。我只是想让它停止。

我随处可见的无处不在的 javascript 解决方案是这样的:

$(document).bind(
   'touchmove',
   function(e) {
     e.preventDefault();
   }
);

但这会完全阻止滚动。有没有办法只消除反弹。最好使用 CSS 或元标记而不是 JS，但任何有效的都行。

Answer 1

我必须添加另一个答案。我的第一种方法应该可行，但是，有一个 iOS 错误，它仍然会影响整个页面，即使 e.stopPropagation 也是如此。

mikeyUX 找到解决方法:https://stackoverflow.com/a/16898264/2978727我想知道为什么他只是为了这个好主意点击了几下...

这就是我在我的案例中使用他的方法的方式:

var content = document.getElementById('scrollDiv');
content.addEventListener('touchstart', function(event) {
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.slideBeginY = event.pageY;
});

content.addEventListener('touchmove', function(event) {
    var up = (event.pageY > this.slideBeginY);
    var down = (event.pageY < this.slideBeginY);
    this.slideBeginY = event.pageY;
    if ((up && this.allowUp) || (down && this.allowDown)) {
        event.stopPropagation();
    }
    else {
        event.preventDefault();
    }
});