没有jQuery实现这一目标的方法:
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
});
-webkit-overflow-scrolling: touch;
here
是例子这种只能防止WebView中的超频,而不是在应用程序中。因此,您需要在应用程序配置中禁用此功能。 如果使用
phonegap:
<preference name="DisallowOverscroll" value="true" />
更多描述here
如果您不使用
Phonegap,则可以使用this
。
因此,当您的身体中滚动内容并希望禁用弹性滚动
使用:
let scrollToTop = $(window).scrollTop();
if (scrollToTop < 0) {
// do something here
}
在我的情况下,这里的其他解决方案之一不足。它禁止所有滚动。可以在这里构建一个解决方案,以防止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中的身体不再可滚动或弹力滚动,而是孩子的元素。然后,您可以向这些孩子添加
-webkit-overflow-scrolling: touch;
['resize', 'orientationchange', 'scroll'].forEach(function(event) {
window.addEventListener(event, function() {
window.scrollTo(0, 0);
});
});
除了我共享的第一个代码块外,还应该在iOS滚动的文档滚动时确实将斧头放在iOS中。
基于@umidbek的答案,这就是它对我有用的方式
document.getElementById('content-sections').
addEventListener('touchmove', function (event) {
event.preventDefault();
return false;
});
现在实际上有一种现代CSS来处理此问题,这在所有现代浏览器上都得到了支持,包括iOS上的Safari。
caniuse.com说这是自2022年以来的基准。