防止iPad/iPhone Safari的弹性滚动，但允许内容滚动。

Question

我希望能够禁用 iPad/iPhone Safari 浏览器中的弹性滚动效果（弹跳效果）。我尝试使用 touchmove 的 preventDefault 方法，但这会完全阻止滚动。我想要能够滚动内容但只是防止弹跳。我的页眉和页脚是固定的。 有什么建议吗？

- anwith.ct

---

我知道-webkit-overflow-scrolling: touch;可以启用弹性滚动...你可以尝试将其设置为auto以关闭它。适用于默认没有弹性滚动的元素。 - Tim M.

@TimMedora 我应该在哪个控件上应用这个属性？我尝试在我的内容 div 上应用它，但是出现了一个“未知属性名”的错误。 - anwith.ct

你可以尝试将其应用于CSS中的整个body元素...我不知道那是否有效，只是想提一下。更有可能有效的方法是隐藏body的溢出，并添加另一个带有overflow:auto的元素。默认情况下，只有body的滚动是弹性的；新元素应该可以无弹跳地滚动。 - Tim M.

@TimMedora Tim，这个想法可以在OS-X上的Safari中实现，但在ios（触摸设备）上却不行，body元素上的overflow:hidden对ios无效，我已经尝试过了。 - anwith.ct

Answer 1

使用以下代码可以在iOS8上的Mobile Safari (AppleWebKit/600)中检测到顶部(向下滑动)是否发生了滚动弹跳：

window.onscroll = function() { if (document.body.scrollTop < 0) { // do something } }

我尝试找到一种干净的方式来"中断"弹跳，但没有找到什么好方法。请注意，window.onscroll解决方案在UIWebView中不起作用，因为我认为在UIWebView中不会触发onscroll事件，但这不是问题，因为UIWebView没有弹跳！您可以使用https://dev59.com/YF4b5IYBdhLWcg3wsDh3#30495399检测是否使用UIWebView与WKWebView。

我正在使用此代码进行测试(必须克隆并全屏打开才能在iOS上测试)：http://jsbin.com/tocako/edit

- robocat