La désactivation de l'android de google chrome pull-down à la fonctionnalité d'actualisation

L'action par défaut du pull-to-refresh effet peut être prévenue par l'une des méthodes suivantes :

1. preventDefault’ing une partie de la touche de la séquence, y compris les suivants (dans l'ordre de la plus perturbante pour les moins perturbatrices):
   • un. L'ensemble de la touche de flux (pas idéal).
   • b. Tous les meilleurs overscrolling touchmoves.
   • c. Le premier overscrolling touchmove.
   • d. Le premier overscrolling touchmove uniquement lorsque 1) les premières évènements touchstart s'est produite lorsque la page y de défilement décalage était de zéro et 2) la touchmove induirait haut overscroll.
2. L'application “touch-action: none” pour toucher les éléments cibles, le cas échéant, la désactivation par défaut des actions (y compris les pull-to-refresh) de la touche de la séquence.
3. L'application “overflow-y: hidden” à l'élément de corps, à l'aide d'un div pour le contenu défilant si nécessaire.
4. Désactivation de l'effet local par chrome://flags/#disable-pull-to-refresh-effect).

Voir plus

Pour le moment vous ne pouvez désactiver cette fonction via chrome://flags/#disable-pull-to-refresh-effet - ouvrir directement à partir de votre appareil.

Vous pouvez essayer de l'attraper touchmove événements, mais les chances sont très minces pour parvenir à un résultat acceptable.

AngularJS

J'ai désactivé correctement avec cette AngularJS directive:

//Prevents "pull to reload" behaviour in Chrome. Assign to child scrollable elements.
angular.module('hereApp.directive').directive('noPullToReload', function() {
    'use strict';

    return {
        link: function(scope, element) {
            var initialY = null,
                previousY = null,
                bindScrollEvent = function(e){
                    previousY = initialY = e.touches[0].clientY;

                    //Pull to reload won't be activated if the element is not initially at scrollTop === 0
                    if(element[0].scrollTop <= 0){
                        element.on("touchmove", blockScroll);
                    }
                },
                blockScroll = function(e){
                    if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
                        e.preventDefault();
                    }
                    else if(initialY >= e.touches[0].clientY){ //Scrolling down
                        //As soon as you scroll down, there is no risk of pulling to reload
                        element.off("touchmove", blockScroll);
                    }
                    previousY = e.touches[0].clientY;
                },
                unbindScrollEvent = function(e){
                    element.off("touchmove", blockScroll);
                };
            element.on("touchstart", bindScrollEvent);
            element.on("touchend", unbindScrollEvent);
        }
    };
});

Il est sûr d'arrêter de le regarder dès que l'utilisateur fait défiler vers le bas, comme le canapé pour se rafraîchir n'a aucune chance d'être déclenchée.

De même, si scrolltop > 0, l'événement ne sera pas déclenché. Dans mon application, je la lie de la touchmove événement sur les évènements touchstart, seulement si scrollTop <= 0. Je unbind dès que l'utilisateur fait défiler (initialY >= e.touches[0].clientY). Si l'utilisateur fait défiler jusqu' (previousY < e.touches[0].clientY), puis j'appelle preventDefault().

Ce qui nous sauve, en regardant les événements de défilement inutilement, mais les blocs de overscrolling.

jQuery

Si vous utilisez jQuery, c'est le non testé équivalent. element est un élément jQuery:

var initialY = null,
    previousY = null,
    bindScrollEvent = function(e){
        previousY = initialY = e.touches[0].clientY;

        //Pull to reload won't be activated if the element is not initially at scrollTop === 0
        if(element[0].scrollTop <= 0){
            element.on("touchmove", blockScroll);
        }
    },
    blockScroll = function(e){
        if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
            e.preventDefault();
        }
        else if(initialY >= e.touches[0].clientY){ //Scrolling down
            //As soon as you scroll down, there is no risk of pulling to reload
            element.off("touchmove");
        }
        previousY = e.touches[0].clientY;
    },
    unbindScrollEvent = function(e){
        element.off("touchmove");
    };
element.on("touchstart", bindScrollEvent);
element.on("touchend", unbindScrollEvent);

Naturellement, la même chose peut également être réalisé avec de la pure JS.

Javascript Simple

J'ai mis en place à l'aide de javascript standard. Simple et facile à mettre en œuvre. Il suffit de coller et il fonctionne très bien.

<script type="text/javascript">         //<![CDATA[
     window.addEventListener('load', function() {
          var maybePreventPullToRefresh = false;
          var lastTouchY = 0;
          var touchstartHandler = function(e) {
            if (e.touches.length != 1) return;
            lastTouchY = e.touches[0].clientY;
            //Pull-to-refresh will only trigger if the scroll begins when the
            //document's Y offset is zero.
            maybePreventPullToRefresh =
                window.pageYOffset == 0;
          }

          var touchmoveHandler = function(e) {
            var touchY = e.touches[0].clientY;
            var touchYDelta = touchY - lastTouchY;
            lastTouchY = touchY;

            if (maybePreventPullToRefresh) {
              //To suppress pull-to-refresh it is sufficient to preventDefault the
              //first overscrolling touchmove.
              maybePreventPullToRefresh = false;
              if (touchYDelta > 0) {
                e.preventDefault();
                return;
              }
            }
          }

          document.addEventListener('touchstart', touchstartHandler, false);
          document.addEventListener('touchmove', touchmoveHandler, false);      });
            //]]>    </script>

Je trouve le réglage de votre corps CSS overflow-y:hidden est la façon la plus simple. Si vous ne voulez avoir un défilement de page de l'application, vous pouvez simplement utiliser un div conteneur avec défilement de fonctionnalités.

Noter que overflow-y n'est pas héréditaire, de sorte que vous besoin de le mettre sur TOUS les éléments de bloc.

Vous pouvez le faire avec jQuery simplement par:

        $(document.body).css('overflow-y', 'hidden'); 
        $('*').filter(function(index) {
            return $(this).css('display') == 'block';
        }).css('overflow-y', 'hidden');

Pur js solution.

//Prevent pull refresh chrome
    var lastTouchY = 0;
    var preventPullToRefresh = false;
    window.document.body.addEventListener("touchstart", function(e){
        if (e.touches.length != 1) { return; }
        lastTouchY = e.touches[0].clientY;
        preventPullToRefresh = window.pageYOffset == 0;
    }, false);

    window.document.body.addEventListener("touchmove", function(e){

        var touchY = e.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;
            }
        }

    }, false);