use*_*913 9 chrome-ios pull-to-refresh
我正在我的网站上实现一个绘图应用程序,并尝试在用户绘制画布时防止过度滚动.尽管尝试了几种报告的解决方案,但我无法禁用Chrome的pull-to-refresh.
根据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>