Example

Question

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

我尝试了

的答案

Disabling android's chrome pull-down-to-refresh feature

body {
  overflow-y: hidden;
}

或

body {
  touch-action: none;
}

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

Answer 1

以下代码是从几个来源提取的仅限javascript的解决方案，这些解决方案位于底部。

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

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

Example

虽然jsfiddle的iframe结构可以防止拉动刷新工作，但我还在Chrome Android 60.0.3112.116上的平面HTML文档中测试了相同的脚本。

Full 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 answer linking to chromestatus.com page

"Treat Document Level Touch Event Listeners as Passive", chromestatus

"Making touch scrolling fast by default"

"Touch events"

scroll-boundary-behavior链接：

chromestatus

chromium bug

github issue proposing the standard

draft css module，上次发布日期2017-09-07

Answer 2

这是一种捕获所需触摸手势以防止拉动刷新的CSS方法：

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

这种方法似乎对其他用户有效。希望它能满足您的需求。

参考，此外还讨论了更多策略： Disabling android's chrome pull-down-to-refresh feature

mobile：如何防止pull-to-refresh

2 个答案:

Example