Question

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

当然，我试过了event.preventDefault（）;和触摸动作：无;但它看起来并不合适。我应该在body标签上添加eventListner和touch-action＆＃34;＆＃34;？我希望通过示例获得有用的答案。

Answer 1

对于最新版本的Chrome：

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

旧解决方案：

由于默认情况下移动Chrome＆gt; = 56个事件侦听器是被动的，被动事件侦听器无法再阻止默认设置。 See here 您必须使用活动事件侦听器，如下所示：

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

Answer 2

试试这个。

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

对我来说效果很好。由于其他javascript hacks，我有奇怪的滚动问题。阅读这篇文章了解更多详情。

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

Answer 3

这样的滚动行为对我都不起作用。

body {
    overscroll-behavior: none 
}

Answer 4

此处发布的仅限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 个答案: