如何防止移动chrome的下拉刷新答案

【问题标题】：How to prevent pull-down-to-refresh of mobile chrome如何防止移动chrome的下拉刷新
【发布时间】：2016-07-12 18:48:10
【问题描述】：

我想防止移动 chrome（尤其是 iOS chrome）的下拉刷新。我的 Web 应用程序具有带有设备宽度和设备高度视口的垂直平移事件，但是每当向下平移时，由于浏览器的默认功能，移动 chrome 会自行刷新。另外，在 Safari 浏览器上，屏幕在平移事件期间滚动。我想禁用这些动作。

当然，我试过 event.preventDefault();和触摸动作：无；但它看起来不起作用。我应该在“身体标签”上添加 eventListner 和 touch-action 吗？我希望通过示例得到有用的答案。

【问题讨论】：

添加一个最小的示例代码以获得好的答案
@Raju 我在这里找到了简单的示例代码！谢谢>Ooutput.jsbin.com/qofuwa/2/quiet
我不是这个意思。发布 Minimal, Complete, and Verifiable example (MCVE) 来证明您的问题将帮助您获得更好的答案。
@Raju 该帖子是不言自明的。无论如何，添加代码也无济于事。推动像 MCVE 这样的大词并不能提高你的观点。不要这样

标签： javascript ios css mobile

【解决方案1】：

对于最新版本的 Chrome：

html,
body {
    overscroll-behavior-y: contain;
}

旧解决方案：

由于移动 Chrome >= 56 事件侦听器默认是被动的，被动事件侦听器无法再阻止默认设置。 See here 您必须像这样使用活动事件侦听器：

document.addEventListener('touchstart', touchstartHandler, {passive: false});
document.addEventListener('touchmove', touchmoveHandler, {passive: false});

【讨论】：

哇，破坏了很多网站，但是是的，我明白他们为什么选择它。谢谢！

【解决方案2】：

试试这个。

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

对我来说效果很好。由于其他javascript hack，我遇到了奇怪的滚动问题。阅读本文了解更多详情。

https://developers.google.com/web/updates/2017/11/overscroll-behavior

【讨论】：

是的，我发布的 hack 似乎不再起作用了。这在这里工作得很好！
这仅适用于 Chrome Android，不适用于 Chrome IOs

【解决方案3】：

此处发布的纯 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
        });

    }
})();

【讨论】：

【解决方案4】：

滚动行为不适合我。

body {
    overscroll-behavior: none 
}

【讨论】：

forum.framework7.io/t/…