我正在我的网站上实现一个绘图应用程序，并试图防止用户在画布上绘制时过度滚动。尽管尝试了几种报告的解决方案，但我无法禁用 Chrome 的下拉刷新。
根据 https://developers.google.com/web/updates/2017/11/overscroll-behavior 的说法，下面的一行css应该可以解决问题。然而，拉动刷新和烦人的用户体验仍然存在。有什么想法吗？
<!DOCTYPE html>
<html>
<style type="text/css">
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
</style>
<body>
<h1>Simple Site</h1>
</body>
<script type="text/javascript">
</script>
</html>
我遇到了同样的问题。我发现CSS属性仅适用于chrome-android。
最后，我通过以下方式成功地防止了 chrome-ios 上的下拉刷新：
<script>
function preventPullToRefresh(element) {
var prevent = false;
document.querySelector(element).addEventListener('touchstart', function(e){
if (e.touches.length !== 1) { return; }
var scrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
prevent = (scrollY === 0);
});
document.querySelector(element).addEventListener('touchmove', function(e){
if (prevent) {
prevent = false;
e.preventDefault();
}
});
}
preventPullToRefresh('#id') // pass #id or html tag into the method
</script>
适用于 IOS 上较新版本的 Chrome v75.0.3770.103
preventDefault()
不再禁用下拉刷新。
相反，您可以添加
{passive:false}
作为事件侦听器的附加选项。
例如
window.addEventListener("touchstart", eventListener, {passive:false});
在 IOS 中较新版本的 chrome 中，preventDefault();不再禁用拉取刷新。 对于最新版本，您只需将 inobounce js cdn 添加到要禁用拉取刷新的页面标题中即可。这将发挥魔力。
<script src="https://cdnjs.cloudflare.com/ajax/libs/inobounce/0.2.0/inobounce.js"></script>
唯一对我有用的是iNoBounce。
示例 React 代码段：
import 'inobounce'
...
<div style={{
height: windowHeight,
WebkitOverflowScrolling: 'touch',
overflowY: 'auto' }}
>Content goes here</div>