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();
    }
});

Answer 2

通过阻止文档的默​​认行为来禁用弹跳:

document.addEventListener("touchmove", function(event){
    event.preventDefault();
});

允许滚动以防止触摸到达文档级别(阻止滚动的位置):

var scrollingDiv = document.getElementById('scrollDiv');
scrollingDiv.addEventListener('touchmove', function(event){
    event.stopPropagation();
});

注意这两者之间的区别:

event.stopPropagation()
event.preventDefault()

StopPropagation应该是你的选择!这是一个非常好的解释:http: //davidwalsh.name/javascript-events

编辑:同样的问题,相同的解决方案: 在iOS 5上的document.ontouchmove和滚动

Edit2:修改了变量名中的拼写错误,在方法后添加了括号

Answer 3

如果适用于桌面浏览器，不需要任何 JavaScript 代码，只需几行 CSS 代码：

html {
    height  : 100%;
    overflow: hidden;
}
body {
    height  : 100%;
    overflow: auto;
}

Answer 4

我尝试了在 stackoverflow 上找到的许多不同方法，但 iNoBounce 才是真正对我有用的方法： https: //github.com/lazd/iNoBounce

我刚刚将其包含在我的index.html 中：

<script src="inobounce.js"></script>