Javascript 如何防止手机chrome下拉刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36212722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent pull-down-to-refresh of mobile chrome
提问by Jae Woo Woo
I want to prevent pull-down-to-refresh of mobile chrome(especially iOS chrome). My web application has vertical panning event with device-width and device-height viewport, but whenever panning down, mobile chrome refreshes itself because of browser's default function. Plus, on Safari browser, screen is rolling during panning event. I want to disable these moves.
我想防止下拉刷新移动 chrome（尤其是 iOS chrome）。我的 Web 应用程序具有带有设备宽度和设备高度视口的垂直平移事件，但是每当向下平移时，由于浏览器的默认功能，移动 chrome 都会自行刷新。另外，在 Safari 浏览器上，屏幕在平移事件期间滚动。我想禁用这些动作。
Of course, I tried event.preventDefault(); and touch-action: none; But it doesn't look work. Should I add eventListner and touch-action "on body tag"? I expect useful answer with example.
当然，我试过 event.preventDefault(); 和触摸动作：无；但它看起来不起作用。我应该在“身体标签”上添加 eventListner 和触摸动作吗？我希望通过示例得到有用的答案。
回答by Joshua Ott
For latest versions of Chrome:
对于最新版本的 Chrome：
html,
body {
overscroll-behavior-y: contain;
}
Old solution:
旧解决方案：
Since mobile Chrome >= 56 event listeners are passive by default and passive event listeners can't prevent defaults anymore. See hereYou have to use active event listeners instead like so:
由于移动 Chrome >= 56 事件侦听器默认情况下是被动的，因此被动事件侦听器无法再阻止默认设置。 请参阅此处您必须像这样使用活动事件侦听器：
document.addEventListener('touchstart', touchstartHandler, {passive: false});
document.addEventListener('touchmove', touchmoveHandler, {passive: false});
回答by Gaurav Saluja
Try this.
尝试这个。
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
It worked well for me. I had weird scrolling issues due to other javascript hacks. Read this article for more details.
它对我来说效果很好。由于其他 javascript 黑客，我遇到了奇怪的滚动问题。阅读这篇文章了解更多详情。
https://developers.google.com/web/updates/2017/11/overscroll-behavior
https://developers.google.com/web/updates/2017/11/overscroll-behavior
回答by Ruben Ray Vreeken
The css-only answers posted here did not work for me. I ended up doing the following:
此处发布的仅 css 答案对我不起作用。我最终做了以下事情：
(function() {
var touchStartHandler,
touchMoveHandler,
touchPoint;
// Only needed for touch events on chrome.
if ((window.chrome || navigator.userAgent.match("CriOS"))
&& "ontouchstart" in document.documentElement) {
touchStartHandler = function() {
// Only need to handle single-touch cases
touchPoint = event.touches.length === 1 ? event.touches[0].clientY : null;
};
touchMoveHandler = function(event) {
var newTouchPoint;
// Only need to handle single-touch cases
if (event.touches.length !== 1) {
touchPoint = null;
return;
}
// We only need to defaultPrevent when scrolling up
newTouchPoint = event.touches[0].clientY;
if (newTouchPoint > touchPoint) {
event.preventDefault();
}
touchPoint = newTouchPoint;
};
document.addEventListener("touchstart", touchStartHandler, {
passive: false
});
document.addEventListener("touchmove", touchMoveHandler, {
passive: false
});
}
})();
回答by Masum Billah
Scroll behavior none works for me like this.
滚动行为没有像这样对我有用。
body {
overscroll-behavior: none
}
