mobile:如何防止pull-to-refresh

Question

如何防止Chrome android的Web应用程序中的pull-to-refresh？

我尝试了答案

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

body {
  overflow-y: hidden;
}

要么

body {
  touch-action: none;
}

那没起效.任何人都有一个有效的解决方案？浏览器使用pull-to-refresh默认行为是非常糟糕的,对于Web应用程序来说这是非常不受欢迎的.

Answer 1

下面的代码是一个纯 JavaScript 的解决方案，从几个来源中提取出来，这些来源位于底部。

如果您愿意更改页面的结构，仅 CSS/HTML 选项可能适合您。

此外，草稿 CSS 属性scroll-boundary-behavior正在标准化并添加到 Chrome 中，以提供此功能以及其他功能。由于实现非常非常新，我在答案的底部提供了链接。

例子

尽管 jsfiddle 的 iframe 结构根本阻止了拉动刷新功能，但我还在 Chrome Android 60.0.3112.116 上的平面 HTML 文档中测试了相同的脚本。

完整的jsfiddle

event.preventDefault()可以阻止浏览器默认行为（例如拉动刷新）发生。大多数时候我们都希望浏览器有正常的行为，而不是当它会导致下拉刷新时。由于当触摸向下移动屏幕并且我们滚动到文档顶部时会发生下拉刷新，因此我们只会preventDefault在这些条件下调用。

//We're going to make a closure that will handle events
//so as to prevent the pull-to-refresh behavior.
var pullToRefreshPreventer = (function() {
  //To determine the direction in which a touch is moving,
  //we hold on to a map from touch identifier to touches
  //from the previous event.
  var previousTouches = {};
  return function(event) {
    //First we get all touches in this event and set up
    //the value which will replace `previousTouches`
    //before this event handler exits.
    var touches = Array.prototype.slice.call(event.touches);
    nextTouches = {}
    touches.forEach(function(touch){
      nextTouches[touch.identifier] = touch;
    });

    //Pull-to-refresh behavior only happens if we are
    //scrolled to the top of the document, so we can
    //exit early if we are somewhere in the middle.
    if(document.scrollingElement.scrollTop > 0) {
      previousTouches = nextTouches;
      return;
    }

    //Now we know that we are scrolled to the top of
    //the document;
    //look through the current set of touches and see
    //if any of them have moved down the page.
    for(var ix = 0; ix < touches.length; ix++) {
      var touch = touches[ix],
          id = touch.identifier;
      //If this touch was captured in a previous event
      //and it has moved downwards, we call preventDefault
      //to prevent the pull-to-refresh behavior.
      if(id in previousTouches && previousTouches[id].screenY < touch.screenY) {
        event.preventDefault();
        console.log("event.preventDefault() called")
        break;
      }
    }
    //lastly, we update previousTouches
    previousTouches = nextTouches;
  };
}());

//Since touch events which may call `preventDefault` can be
//much more expensive to handle, Chrome disallows such calls
//by default.  We must add the options argument `{passive: false}`
//here to make it work.
document.body.addEventListener('touchmove', pullToRefreshPreventer, {passive: false});
document.body.addEventListener('touchend', pullToRefreshPreventer, {passive: false});

参考：

StackOverflow 答案链接到 chromestatus.com 页面

“将文档级触摸事件侦听器视为被动”，chromestatus

“默认情况下使触摸滚动速度更快”

“触摸事件”

scroll-boundary-behavior链接：

铬状态

铬虫

github问题提出标准

草稿CSS模块，最后发布日期2017-09-07