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

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

我到处看到的全方位的javascript解决scheme是这样的：

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

但是这可以防止完全滚动。 有没有办法来消除反弹。 最好用CSS或一个元标签而不是JS，但任何有效的工作将会做。

Answer 1

我必须添加另一个答案。 我的第一种方法应该工作，但是，有一个iOS的错误，即使e.stopPropagation，它仍然在整个页面中。

mikeyUXfind这个解决方法︰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应该是你的select！ 这是一个非常好的解释： http : //davidwalsh.name/javascript-events

编辑：同样的问题，相同的解决scheme： document.ontouchmove和滚动iOS 5

编辑2：固定错字在variables名称中加方括号后面的方法

Answer 3

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

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

Answer 4

这个库是我的scheme的解决scheme。 简单的使用方法就是包含库并初始化你想要的位置;

 noBounce.init({ animate: true }); 

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

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

Answer 5

我尝试了很多不同的方法，我在这里find了stackoverflow，但iNoBounce是真的为我工作的东西： https ： //github.com/lazd/iNoBounce

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

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

Answer 6

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

解决scheme写在这里： 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的类=“可滚动”。