禁用android的chrome下拉式刷新功能 [英] Disabling android's chrome pull-down-to-refresh feature

问题描述

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

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

该应用主要用于android手机和Chrome浏览器。此外，该网站保存在主屏幕上，因此Android将整个事件作为一个应用程序进行管理（使用WebView我猜）。

Beta版本（我认为Android System WebView）也推出了下拉刷新功能（查看此链接例如）。

这是一个方便的功能，但我想知道是否可以用一些元标记（或JavaScript的东西）禁用，因为刷新可以很容易地在用户导航时触发该列表和整个应用程序重新加载。

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

我知道这个功能仍然只能在Chrome beta版本中使用，但是我也有这种感觉，它也是在稳定的应用程序上登陆。

谢谢！

编辑：我已经卸载了Chrome Beta，现在固定在主屏幕上的链接随着稳定版Chrome一起打开。所以固定链接以Chrome开始，而不是以webview。

编辑：今天（2015-03-19）下拉式刷新已经到了稳定的铬。

编辑：从@Evyn回答我遵循此链接

a>，并获得了此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。 （'touchmove'，function（e）{var touchY = e.originalEvent.touches [0] .clientY; var touchYDelta = touchY - lastTouchY; lastTouchY = touchY ; if（preventPullToRefresh）{//要抑制拉到刷新防止默认第一个超滚动touchmove就足够了。 preventPullToRefresh = false; if（touchYDelta> 0）{e.preventDefault（）;返回;正如@bcintegrity指出的那样，我希望我们可以通过这种方式来解决这个问题，对于未来的站点清单解决方案（和/或元标签）。

此外，欢迎您提供以上代码的建议。

解决方案

通过执行以下任何操作，可以有效防止拉到刷新效果的默认操作：

1. 阻止默认触摸顺序的某些部分，包括以下任何一项（按照破坏性最小的顺序排列）：
   
   
   
   • 一个。整个触摸流（不理想）。
   
   
   • b。所有顶级超滚动touchmove。
   
   
   • c。第一个顶级超滚动touchmove。
   
   
   • d。第一个顶部过度滚动touchmove只有当1）当页面y滚动偏移量为0时发生初始触摸开始，并且2）touchmove会导致顶部过度滚动。
     


2. 在适当的情况下，将touch-action：none应用于触控目标元素，禁用触控顺序的默认操作（包括拉到刷新）。
   
3. 应用如果需要，可使用div作为可滚动内容。
   
4. 通过chrome禁用本地效果：// flags（disable-pull-to-refresh-效果）。

查看更多

I've created a small HTML5 web application for my company.

This application displays a list of items and everything works fine.

The application is mainly used on android phones and Chrome as browser. Also, the site is saved on the home screen so Android manage the whole thing as an app (using a WebView I guess).

Chrome Beta (and I think also the Android System WebView) has introduced a "pull down to refresh" feature (See this link for example).

This is an handy feature but I was wondering if it can be disabled with some meta tag (or javascript stuff) because the refresh can be easily triggered by the user while navigating the list and the whole app is reloaded.

Also this is a feature not needed by the application.

I know that this feature is still available only in Chrome beta, but I have the sensation that this is landing on the stable app, too.

Thank you!

Edit: I've uninstalled Chrome Beta and the link pinned to the home screen now opens with the stable Chrome. So the pinned links starts with Chrome and not with a webview.

Edit: today (2015-03-19) the pull-down-to-refresh has come to the stable chrome.

Edit: from @Evyn answer I follow this link and got this javascript/jquery code that work.

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;
        }
    }
});

As @bcintegrity pointed out, I hope for a site manifest solution (and/or a meta-tag) in the future.

Moreover suggestions for the code above are welcome.

解决方案

The default action of the pull-to-refresh effect can be effectively prevented by doing any of the following :

1. preventDefault’ing some portion of the touch sequence, including any of the following (in order of most disruptive to least disruptive):
   • a. The entire touch stream (not ideal).
   • b. All top overscrolling touchmoves.
   • c. The first top overscrolling touchmove.
   • d. The first top overscrolling touchmove only when 1) the initial touchstart occurred when the page y scroll offset was zero and 2) the touchmove would induce top overscroll.
2. Applying "touch-action: none" to touch-targeted elements, where appropriate, disabling default actions (including pull-to-refresh) of the touch sequence.
3. Applying "overflow-y: hidden" to the body element, using a div for scrollable content if necessary.
4. Disabling the effect locally via chrome://flags (disable-pull-to-refresh-effect).

See more

这篇关于禁用android的chrome下拉式刷新功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！