禁用android的chrome pull-down-to-refresh功能

Question

我为我的公司创建了一个小型HTML5 Web应用程序.

此应用程序显示项目列表,一切正常.

该应用程序主要用于Android手机和Chrome浏览器.此外,该网站保存在主屏幕上,因此Android管理整个应用程序(我猜是使用WebView).

Chrome Beta(我认为还有Android系统WebView)引入了"下拉刷新"功能(例如,请参阅此链接).

这是一个方便的功能,但我想知道它是否可以使用一些元标记(或javascript东西)禁用,因为用户可以在导航列表时轻松触发刷新并重新加载整个应用程序.

此外,这是应用程序不需要的功能.

我知道这个功能仍然只在Chrome测试版中提供,但我感觉这也是稳定的应用程序.

谢谢!

编辑:我已卸载Chrome测试版,现在可以使用稳定的Chrome打开固定到主屏幕的链接.所以固定链接从Chrome开始,而不是webview.

编辑:今天(2015-03-19)下拉到刷新已经到了稳定的铬.

编辑:从@Evyn回答我按照这个链接,得到了这个javascript/jquery代码.

var lastTouchY = 0;
var preventPullToRefresh = false;

$('body').on('touchstart', function (e) {
    if (e.originalEvent.touches.length != 1) { return; }
    lastTouchY = e.originalEvent.touches[0].clientY;
    preventPullToRefresh = window.pageYOffset == 0;
});

$('body').on('touchmove', function (e) {
    var touchY = e.originalEvent.touches[0].clientY;
    var touchYDelta = touchY - lastTouchY;
    lastTouchY = touchY;
    if (preventPullToRefresh) {
        // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
        preventPullToRefresh = false;
        if (touchYDelta > 0) {
            e.preventDefault();
            return;
        }
    }
});

正如@bcintegrity指出的那样,我希望将来有一个站点清单解决方案(和/或元标记).

此外,欢迎对上述代码提出建议.

Answer 1

通过执行以下任一操作,可以有效防止pull-to-refresh效果的默认操作:

1. preventDefault触摸序列的某些部分,包括以下任何一种(按破坏性最小的破坏性顺序排列):
   • 一个.整个触摸流(不理想).
   • 湾 所有顶级过度触摸的移动.
   • C.第一个顶部过度滚动触摸移动.
   • d.第一个顶部过度滚动触摸仅在1)当页面y滚动偏移为零时发生初始触摸开始并且2)触摸移动将导致顶部过度滚动时移动.
2. touch-action: none在适当的情况下,将" "应用于触摸目标元素,禁用触摸序列的默认操作(包括拉动 - 刷新).
3. 将" overflow-y: hidden"应用于body元素,必要时使用div作为可滚动内容.
4. 通过本地禁用效果chrome://flags/#disable-pull-to-refresh-effect).

看更多

Answer 2

2018+的简单解决方案

Chrome 63(2017年12月5日发布)添加了一个css属性来帮助解决这个问题.请阅读Google的本指南,以便了解如何处理它.

这是他们的TL:DR

CSS overscroll-behavior属性允许开发人员在到达内容的顶部/底部时覆盖浏览器的默认溢出滚动行为.用例包括禁用移动设备上的"拉出 - 刷新"功能,删除过度滚动发光和橡皮筋效果,并防止页面内容在模态/叠加层下方滚动.

要使其正常工作,您需要添加的是CSS中的内容:

body {
  overscroll-behavior: contain;
}

它现在也只有Chrome,Edge和Firefox 支持,但我确信Safari会很快添加它,因为它们似乎完全支持服务工作者和PWA的未来.

Answer 3

目前,您只能通过chrome:// flags/#disable-pull-to-refresh-effect禁用此功能- 直接从您的设备打开.

您可以尝试捕捉touchmove事件,但实现可接受的结果的可能性非常小.

Answer 4

我使用MooTools,我创建了一个类来禁用目标元素上的刷新,但它的关键是(原生JS):

var target = window; // this can be any scrollable element
var last_y = 0;
target.addEventListener('touchmove', function(e){
    var scrolly = target.pageYOffset || target.scrollTop || 0;
    var direction = e.changedTouches[0].pageY > last_y ? 1 : -1;
    if(direction>0 && scrolly===0){
        e.preventDefault();
    }
    last_y = e.changedTouches[0].pageY;
});

我们所做的就是找到touchmove的y方向,如果我们向下移动屏幕并且目标滚动为0,我们就会停止该事件.因此,没有刷新.

这意味着我们在每一次'移动'上开火,这可能是昂贵的,但是到目前为止我找到的最好的解决方案......

Answer 5

AngularJS

我已使用此AngularJS指令成功禁用它:

//Prevents "pull to reload" behaviour in Chrome. Assign to child scrollable elements.
angular.module('hereApp.directive').directive('noPullToReload', function() {
    'use strict';

    return {
        link: function(scope, element) {
            var initialY = null,
                previousY = null,
                bindScrollEvent = function(e){
                    previousY = initialY = e.touches[0].clientY;

                    // Pull to reload won't be activated if the element is not initially at scrollTop === 0
                    if(element[0].scrollTop <= 0){
                        element.on("touchmove", blockScroll);
                    }
                },
                blockScroll = function(e){
                    if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
                        e.preventDefault();
                    }
                    else if(initialY >= e.touches[0].clientY){ //Scrolling down
                        //As soon as you scroll down, there is no risk of pulling to reload
                        element.off("touchmove", blockScroll);
                    }
                    previousY = e.touches[0].clientY;
                },
                unbindScrollEvent = function(e){
                    element.off("touchmove", blockScroll);
                };
            element.on("touchstart", bindScrollEvent);
            element.on("touchend", unbindScrollEvent);
        }
    };
});

用户向下滚动时立即停止观看是安全的,因为刷新的拉力无法被触发.

同样,如果scrolltop > 0,事件将不会被触发.在我的实现中,我只在touchstart上绑定touchmove事件scrollTop <= 0.一旦用户向下滚动(initialY >= e.touches[0].clientY),我就解除绑定.如果用户向上滚动(previousY < e.touches[0].clientY),那么我打电话preventDefault().

这样可以避免我们不必要地观看滚动事件,同时阻止过度滚动.

jQuery的

如果您使用的是jQuery,那么这是未经测试的等价物.element是一个jQuery元素:

var initialY = null,
    previousY = null,
    bindScrollEvent = function(e){
        previousY = initialY = e.touches[0].clientY;

        // Pull to reload won't be activated if the element is not initially at scrollTop === 0
        if(element[0].scrollTop <= 0){
            element.on("touchmove", blockScroll);
        }
    },
    blockScroll = function(e){
        if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
            e.preventDefault();
        }
        else if(initialY >= e.touches[0].clientY){ //Scrolling down
            //As soon as you scroll down, there is no risk of pulling to reload
            element.off("touchmove");
        }
        previousY = e.touches[0].clientY;
    },
    unbindScrollEvent = function(e){
        element.off("touchmove");
    };
element.on("touchstart", bindScrollEvent);
element.on("touchend", unbindScrollEvent);

当然,使用纯JS也可以实现同样的目的.

Answer 6

简单的Javascript

我使用标准 javascript 实现。简单易行。只需粘贴，它就可以正常工作。

<script type="text/javascript">         //<![CDATA[
     window.addEventListener('load', function() {
          var maybePreventPullToRefresh = false;
          var lastTouchY = 0;
          var touchstartHandler = function(e) {
            if (e.touches.length != 1) return;
            lastTouchY = e.touches[0].clientY;
            // Pull-to-refresh will only trigger if the scroll begins when the
            // document's Y offset is zero.
            maybePreventPullToRefresh =
                window.pageYOffset == 0;
          }

          var touchmoveHandler = function(e) {
            var touchY = e.touches[0].clientY;
            var touchYDelta = touchY - lastTouchY;
            lastTouchY = touchY;

            if (maybePreventPullToRefresh) {
              // To suppress pull-to-refresh it is sufficient to preventDefault the
              // first overscrolling touchmove.
              maybePreventPullToRefresh = false;
              if (touchYDelta > 0) {
                e.preventDefault();
                return;
              }
            }
          }

          document.addEventListener('touchstart', touchstartHandler, false);
          document.addEventListener('touchmove', touchmoveHandler, false);      });
            //]]>    </script>

Answer 7

经过几个小时的尝试,这个解决方案对我有用

$("html").css({
    "touch-action": "pan-down"
});

Answer 8

你可以试试这个

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

例子 ：

https://ebidel.github.io/demos/chatbox.html

完整文档 https://developers.google.com/web/updates/2017/11/overscroll-behavior