Deaktivieren android ' s chrome pull-down-to-refresh-Funktion

Ist die Standard-Aktion des pull-to-refresh-Effekt kann wirksam verhindert werden, indem Sie einen der folgenden Schritte aus :

1. preventDefault'ing, die einen Teil des touch-Sequenz, einschließlich der folgenden (in der Reihenfolge der meisten störend am wenigsten störende):
   • ein. Die gesamte touch-stream (nicht ideal).
   • b. Alle top-overscrolling touchmoves.
   • c. Die erste top-overscrolling touchmove.
   • d. Die erste top-overscrolling touchmove nur, wenn 1) die erste touchstart aufgetreten ist, wenn die Seite das y-scroll-offset auf null gesetzt und 2) die touchmove veranlassen würden, top-overscroll.
2. Anwendung "touch-action: none" touch-gezielte Elemente, gegebenenfalls deaktivieren der Standard-Aktionen (einschließlich pull-to-refresh) touch-Sequenz.
3. Anwendung "overflow-y: hidden" für das body-element mit einem div-Tag für scrollbare Inhalte, wenn nötig.
4. Deaktivieren, die Wirkung ist lokal über chrome://flags/#disable-pull-to-refresh-effect).

Sehen Sie mehr

Im moment können Sie nur deaktivieren Sie diese Funktion über chrome://flags/#disable-pull-to-refresh-Wirkung - öffnen Sie direkt von Ihrem Gerät.

Könnten Sie versuchen, zu fangen touchmove Veranstaltungen, aber die Chancen sind sehr gering erreichen ein akzeptables Ergebnis.

AngularJS

Habe ich erfolgreich deaktiviert es mit diesem AngularJS Richtlinie:

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

Es ist sicher, um zu stoppen beobachten, sobald der Benutzer scrollt nach unten, da die pull-to-refresh keine chance hat, ausgelöst wird.

Ebenfalls, wenn scrolltop > 0, das Ereignis wird nicht ausgelöst. In meiner Umsetzung, ich Binde das touchmove-Ereignis auf touchstart, nur wenn scrollTop <= 0. Ich unbind es, sobald der Benutzer scrollt (initialY >= e.touches[0].clientY). Wenn der Benutzer scrollt bis (previousY < e.touches[0].clientY), dann rufe ich preventDefault().

Spart uns dies aus der Beobachtung scroll-Ereignisse unnötig, noch Blöcke overscrolling.

jQuery

Wenn Sie mit jQuery, das ist die ungetestet entspricht. element ist ein jQuery-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");
        }
        previousY = e.touches[0].clientY;
    },
    unbindScrollEvent = function(e){
        element.off("touchmove");
    };
element.on("touchstart", bindScrollEvent);
element.on("touchend", unbindScrollEvent);

Natürlich, das gleiche kann auch erzielt werden mit reinem JS.

Einfache Javascript

Ich implementiert mit standard-javascript. Einfach und leicht zu implementieren. Einfach einfügen und es funktioniert gut.

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

Finde ich die Einstellung Körper CSS overflow-y:hidden ist der einfachste Weg. Wenn Sie nicht wollen, um eine scrolling-Seite Anwendung können Sie einfach einen div-container mit Scroll-Funktionen.

Beachten Sie, dass overflow-y ist nicht geerbt, so müssen Sie es auf ALLE block-Elemente.

Kann man dies mit jQuery einfach durch:

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

Reinen js Lösung.

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