我正在用 HTML 和 JavaScript 编写一个用于 iPhone 的网络应用程序。我想要实现的是防止应用程序弹性滚动（滚动超过页面范围并弹回）。但是，我需要一些较长的应用程序元素才能滚动（应用程序有一个长画布）。
我已经尝试了许多在互联网上其他地方找到的答案，但是，所有这些解决方案要么使用 JQuery，完全禁用滚动，使用 Phonegap，要么只是在 IOS 7 上不起作用。我该怎么做？
【问题讨论】：
标签： javascript ios7 mobile-safari
因此，当您在正文中有滚动内容并想要禁用弹性滚动时 使用：
let scrollToTop = $(window).scrollTop();
if (scrollToTop < 0) {
// do something here
}
因为弹性滚动总是会有负值
【讨论】：
根据@umidbek 的回答，这对我来说是这样的
document.getElementById('content-sections').
addEventListener('touchmove', function (event) {
event.preventDefault();
return false;
});
【讨论】：
在我的情况下，上述解决方案是不够的。它禁止所有滚动。可以在这里构建一个解决方案来防止在 iOS 中进行弹性滚动，但仍然允许在子级上滚动。我采用了上述解决方案并添加了一个检查，该检查使 DOM 冒泡以确定哪个可滚动元素“拥有”滚动事件，如果它是页面的根元素，我将其删除：
function overflowIsHidden(node) {
var style = getComputedStyle(node);
return style.overflow === 'hidden' || style.overflowX === 'hidden' || style.overflowY === 'hidden';
}
function findNearestScrollableParent(firstNode) {
var node = firstNode;
var scrollable = null;
while(!scrollable && node) {
if (node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight) {
if (!overflowIsHidden(node)) {
scrollable = node;
}
}
node = node.parentNode;
}
return scrollable;
}
document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('touchmove', function(event) {
var owner = findNearestScrollableParent(event.target);
if (!owner || owner === document.documentElement || owner === document.body) {
event.preventDefault();
}
});
}, false);
此时，iOS 中的 body 不再可滚动或弹性滚动，但子元素可以。然后，您可以将-webkit-overflow-scrolling: touch; 添加到这些孩子，使它们具有弹性，但文档不会。即使您滚动到子项的底部，这实际上也会捕获所有滚动事件，因此窗口的滚动位置永远不会错误地改变。或者，您也可以考虑：
['resize', 'orientationchange', 'scroll'].forEach(function(event) {
window.addEventListener(event, function() {
window.scrollTo(0, 0);
});
});
除了我分享的第一个代码块之外，真的应该对 ios 中的文档滚动完全扔斧头。
【讨论】：
有一种方法可以在没有 jQuery 的情况下实现这一点：
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
});
但这不是一个合适的解决方案。最好将您的内容包装在某个 div 中，并在其上使用 css 属性：
-webkit-overflow-scrolling: touch;
Here 就是例子
编辑：
这只会防止网页视图中的过度滚动，而不是应用程序中的过度滚动。因此，您需要在应用配置中禁用此功能。 如果您使用 phonegap：
<preference name="DisallowOverscroll" value="true" />
更多描述here
如果你不使用phonegap，你可以使用this。
【讨论】：