禁止弹跳滚动，但允许正常滚动

I don't want the content of my site sloshing around when the user hits the edge of a page. I just want it to stop.

当用户点击页面的边缘时，我不希望我的站点的内容到处晃动。我只是想让它停下来。

The omni-present javascript solution I see everywhere is this:

随处可见的javascript解决方案是:

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

But this prevents scrolling entirely. Is there way to just remove the bounce. Preferably with CSS or a meta tag as opposed JS, but anything that works will do.

但这完全阻止了滚动。是否有办法消除反弹。最好使用CSS或者元标签而不是JS，但是任何有用的东西都可以。

6 个解决方案

#1

I have to add another answer. My first approach should work, but, there is an iOS bug, which still bumbs the whole page, even if e.stopPropagation.

我得再加一个答案。我的第一种方法应该是可行的，但是有一个iOS bug，即使. stoppropagation，它仍然会影响整个页面。

mikeyUX find a workaround for this: https://*.com/a/16898264/2978727 I wonder why he just get a few clicks for this great idea...

mikeyUX找到了一个变通方法:https://*.com/a/16898264/2978727我想知道他为什么会因为这个好主意而点击几下……

This is how I used his approach in my case:

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

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

#2

Disable bouncing by prevent the default behaviour of the document:

禁止弹跳，防止文件的默认行为:

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

Allow scrolling by prevent that the touch reaches the document level (where you would prevent the scrolling):

允许滚动，以防止触摸达到文档级别(在这里可以防止滚动):

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

Mind the difference between these two:

注意这两者之间的区别:

event.stopPropagation()
event.preventDefault()

StopPropagation should be your choice here ! Here is a very good explanation: http://davidwalsh.name/javascript-events

停止传播应该是你在这里的选择!这里有一个很好的解释:http://davidwalsh.name/javascrit -events。

Edit: Same problem, same solution: document.ontouchmove and scrolling on iOS 5

编辑:相同的问题，相同的解决方案:文档。ontouchmove和滚动iOS 5

Edit2: fixed typo in variable names added brackets after methods

Edit2:固定类型的变量名加括号后的方法。

#3

If apply to Desktop Browser, don't need any JavaScript codes, just few lines of CSS codes:

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

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

#4

This library is solution for my scenarios. Easy way to use just include library and initialize where you want like these;

这个库是我的方案的解决方案。简单的使用方法，只包括库和初始化在你想要的地方，像这样;

noBounce.init({   
    animate: true
});

If you want to prevent bouncing only on one element and not on the whole page you can do it like:

如果你想避免只在一个元素上反弹而不是在整个页面上反弹，你可以这样做:

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

#5

I tried lots of different approaches I found here on *, but iNoBounce was the thing that really worked for me: https://github.com/lazd/iNoBounce

我在*上尝试了很多不同的方法，但是iNoBounce是真正适合我的东西:https://github.com/lazd/inob盎司

I just included it in my index.html:

我只是把它包含在我的index.html中:

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

#6

Found a code that worked to me, I believe it will work to you.

找到对我有用的代码，我相信对你也有用。

The solution is written here: http://apdevblog.com/optimizing-webkit-overflow-scrolling/

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

Basically, you need to have this js code:

基本上，您需要有这个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);
    }

And then, have your scrollable divs with the class="scrollable".

然后，使用class="scrollable"替换可滚动div。

#1