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

编辑：同样的问题，相同的解 document.ontouchmove and scrolling on iOS 5

EDIT2：用变量名修正拼写错误在方法

之后添加了括号

Answer 3

我在stackoverflow上尝试了很多不同的方法，但iNoBounce对我来说真的很有用： https://github.com/lazd/iNoBounce

我刚把它包含在我的index.html中：

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

Answer 4

This library是我的方案的解决方案。简单的使用方法只包括库并初始化您想要的地方;

noBounce.init({   
    animate: true
});

如果你想防止只在一个元素上而不是在整个页面上弹跳，你可以这样做：

 noBounce.init({
    animate: true,
    element: document.getElementById("content")
  });

Answer 5

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

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

Answer 6

找到一个对我有用的代码，我相信它会对你有用。

解决方案写在这里：http://apdevblog.com/optimizing-webkit-overflow-scrolling/

基本上，你需要有这个js代码：

    document.addEventListener("DOMContentLoaded", ready, false);
    document.addEventListener("touchmove", function (evt)
    {
        evt.preventDefault();
    }, false);

    function ready()
    {
        var container = document.getElementsByClassName("scrollable")[0];
        var subcontainer = container.children[0];
        var subsubcontainer = container.children[0].children[0];

        container.addEventListener("touchmove", function (evt)
        {
            if (subsubcontainer.getBoundingClientRect().height > subcontainer.getBoundingClientRect().height)
            {
                evt.stopPropagation();
            }
        }, false);
    }

然后，让你的可滚动div与class =“scrollable”。

Answer 7

尝试了这些建议并阅读了几篇文章之后，对我来说，解决方法是使用CSS属性<溢出-x：隐藏； >在有问题的元素/容器上。

iOS：禁用反弹滚动但允许正常滚动

7 个答案: