wake-up-neo.com

Wenn ich -webkit-overflow-scrolling verwende, kann der Bildlauf der Bilder manchmal stehen bleiben

wenn ich -webkit-overflow-scrolling für ein scrollendes div verwende, scrollt es perfekt mit dem nativen Moment. Aber div selbst friert manchmal ein und reagiert nicht auf meine Fingerbewegungen. Nach 2-3 Sekunden wird es wieder scrollbar. 

Ich weiß nicht, wie ich dieses Problem reproduziere. Aber wie ich sehe, gibt es zwei Hauptverhalten, die diese Situation schaffen. 

Erstens: Wenn ich eine Weile warte, zum Beispiel 20 Sekunden, und das div berühre, reagiert es nicht. Ich warte ein paar Sekunden und es funktioniert wieder.

Zweitens fühle ich mich mehrmals schnell, dann friert es ein und nach ein paar Sekunden wieder funktioniert es wieder.

Wie kann ich dieses Einfrieren verhindern?

ioscsssafariwebkit
36
Adem

Das Einfrieren war für mich wiederholbar und trat auf, wenn versucht wurde, nach oben oder unten zu scrollen, wenn bereits oben oder unten. Das Update bestand darin, einige Listener für touchstart und touchmove hinzuzufügen und diese Fälle und event.preventDefault() on ’em zu erkennen.

Etwas wie das Folgende, wobei .scroller das div ist, das tatsächlich scrollen wird (ändert sich in scrollTop).

var lastY = 0; // Needed in order to determine direction of scroll.
$(".scroller").on('touchstart', function(event) {
    lastY = event.touches[0].clientY;
});

$('.scroller').on('touchmove', function(event) {
    var top = event.touches[0].clientY;

    // Determine scroll position and direction.
    var scrollTop = $(event.currentTarget).scrollTop();
    var direction = (lastY - top) < 0 ? "up" : "down";

    // FIX IT!
    if (scrollTop == 0 && direction == "up") {
      // Prevent scrolling up when already at top as this introduces a freeze.
      event.preventDefault();
    } else if (scrollTop >= (event.currentTarget.scrollHeight - event.currentTarget.outerHeight()) && direction == "down") {
      // Prevent scrolling down when already at bottom as this also introduces a freeze.
      event.preventDefault();
    }

    lastY = top;
});

Ich hoffe, das hilft der nächsten armen Seele, die auf diesen schrecklichen Käfer stößt! Viel Glück und weiter kämpfen!

5
Wesley Reitzfeld

Dies ist eine offene Ausgabe, deren Link hier zu finden ist Ausgabe in iOS

Eine der Lösungen zu diesem Problem finden Sie hier in diesem GitHub-Link github

Entsprechend den in den oben genannten GitHub-Links gefundenen Problemen - Es können nur wenige Schritte verfolgt werden, um das Bildlaufproblem zu entfernen.

  • Kommentar aus den folgenden zwei Zeilen im ionic.js

    self.el.style.overflowY = 'hidden';

self.el.style.overflowX = 'hidden';

  • Verwenden Sie cordova.plugins.Keyboard.disableScroll(true), um Ohne Unterbrechung durch die Tastatur zu scrollen

  • $ionicConfigProvider.scrolling.jsScrolling(true) Setzen Sie diese Option im Konfigurationsteil auf "true".

  • Unter bestimmten Umständen ist Overflow-Scroll auf "hidden" gesetzt, aber nicht mehr auf "scroll", wodurch der Bildschirm einfriert. 

Ich hoffe es kann dir helfen.

/ * Notwendige Maßnahmen für mich, das schließt die Antwort aus * /

/ * Ich erkläre hiermit die vollständige Zuordnung zu den von Github veröffentlichten Seiten, die im Link wie oben angegeben angegeben sind. * /

5
Pritish Vaidya

Stabile Lösung

Nach vielen Tagen, um das Problem zu beheben, habe ich gesehen, dass das Problem von einem fixierten body-Element herrührt, vielleicht weil Sie nicht möchten, dass Ihre Benutzer den Seitenkörper sehen, wenn der Bildlauf gesperrt ist: cf dieses Beispiel . Wenn der Körper behoben ist und ein Bildsturz beim Scrollen auftritt, wenn Sie den Körper mit Desktop Safari auf Ihrem iOS-Gerät untersuchen, können Sie feststellen, dass es sich "künstlich" bewegt ... ja, Webkit-Zeug. ..

Ich habe alle Lösungen ausprobiert, die zu dieser Bedrohung aufgeführt sind, aber auch zu github-ähnlichen Problemen. Niemand hat gearbeitet.

Die einzige stabile Lösung für mich ist die Verwendung dieses Pakets: body-scroll-lock und entfernt die fixed von Ihrem body-Element. Im Moment können Sie sowohl festsitzende Körper als auch keine einfrierenden Fehler beim Scrollen genießen.

Ich hoffe, es hilft Leuten, die derzeit progressive Web-Apps auf IOS erstellen.

0
Aarbel

Ich habe den folgenden Code verwendet, der meiner Meinung nach funktioniert. 

var scrollTimer;
$('.scroller').on('scroll',function(e){
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => {
        this.scrollTop = Math.max(1, Math.min(this.scrollTop, this.scrollHeight - this.clientHeight - 1));
      }, 300);
});
0
Kenneth Chan