android - 禁用 android 的 chrome 下拉刷新功能

Question

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

此应用程序显示项目列表，一切正常。

该应用程序主要用于安卓手机和Chrome浏览器。此外，该网站保存在主屏幕上，因此 Android 将整个内容作为应用程序进行管理( 我猜是使用 WebView )。

Chrome Beta(我认为也是 Android System WebView) 引入了“下拉刷新”功能 (See this link for example)。

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

这也是应用程序不需要的功能。

我知道这个功能仍然只在 Chrome 测试版中可用，但我感觉它也登陆了稳定的应用程序。

谢谢!

编辑:我已经卸载了 Chrome Beta，固定到主屏幕的链接现在可以使用稳定的 Chrome 打开。所以固定链接以 Chrome 开头，而不是 webview。

编辑:今天(2015 年 3 月 19 日)下拉刷新已进入稳定版 chrome。

编辑:来自@Evyn 的回答我关注 this link并得到了这个工作的 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 指出的那样，我希望将来有一个站点 list 解决方案(和/或元标记)。

欢迎对以上代码提出建议。

Answer 1

通过执行以下任一操作，可以有效防止拉动刷新效果的默认 Action :

1. preventDefault’ing 触摸序列的某些部分，包括以下任何一项(按照破坏性最大到破坏性最小的顺序):
   • 一个。整个触摸流(不理想)。
   • b.所有顶部滚动触摸 Action 。
   • c.第一个顶部滚动触摸 Action 。
   • d.仅当 1) 初始 touchstart 发生在页面 y 滚动偏移量为零时，以及 2) touchmove 会导致顶部过度滚动时，才进行第一次顶部过度滚动。
2. 在适当的情况下将“touch-action: none”应用于以触摸为目标的元素，禁用触摸序列的默认操作(包括下拉刷新)。
3. 对 body 元素应用“overflow-y: hidden”，必要时使用 div 作为可滚动内容。
4. 通过 chrome://flags/#disable-pull-to-refresh-effect 在本地禁用效果。

See more