移动：如何防止下拉刷新

Posted 2023-02-24

【中文标题】移动：如何防止下拉刷新

【英文标题】：mobile: how to prevent pull-to-refresh

【发布时间】：2016-10-13 03:38:33

【问题描述】：

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

我尝试了来自

的答案

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

body 
  overflow-y: hidden;

或

body 
  touch-action: none;

它没有工作。任何人都有有效的解决方案？浏览器默认拉刷新是非常糟糕的，对于网络应用来说是非常不可取的。

【问题讨论】：

如果有一个强大的解决方案，并且不太可能随着下一次 chrome 更新等而改变，那就太好了。

很有趣。也许我会尝试一下。

【参考方案1】：

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

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

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

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

【参考方案2】：

下面的代码是一个纯 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);

参考资料：

*** 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

【讨论】：

我还不能在平板电脑上进行测试，但我会接受作为答案，因为我不希望你在赏金到期后错过！希望它有效，并将尽快测试和确认！谢谢。

LMK 进展如何！

结果：PC远程调试，当使用鼠标模拟向下滑动时，在Chrome开发者工具Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted查看橙色信息消息。 1) 在PC调试界面，我可以用鼠标向下滑动刷新页面。 2) 我无法使用手指刷新页面并在平板电脑上向下滑动。 3) 但是，如果我在 jqueryu ui 自动完成下拉列表位于其列表顶部时向下滑动它，我 可以 刷新页面。因为3，还没成功。

PS这就是我从Android远程调试到PC的方式***.com/q/45560325

是的，我在上面提到了——“虽然 jsfiddle 的 iframe 结构完全阻止了 pull-to-refresh 的工作”——jsfiddle 构建了它的页面，因此总是有一个 DOM 包装器可以防止 pull-刷新。如果您尝试直接访问它用于结果 iframe 的 URL，它也会将其扔到包装器中。