Behebung von Scroll-Problemen mit Ihrer Website auf dem Handy

Ich hatte gestern ein böses Problem. Ein Benutzer meldete uns, dass das Scrollen auf bestimmten Seiten wirklich fehlerhaft war. Der erste Schritt bestand darin, herauszufinden, was dieser "wirklich fehlerhafte" Teil war. Es stellte sich heraus, dass das System einfach nicht reagierte, wenn Sie an bestimmten Stellen der Benutzeroberfläche eine Scroll-Geste auslösten. Ich fand heraus, dass ich das Problem in Chrome auf meinem Laptop mit aktiviertem Gerätesimulationsmodus reproduzieren konnte, was schon eine große Erleichterung war.

Öffnen Sie die DevTools von Chrome und klicken Sie auf das folgende Symbol, um die Gerätesymbolleiste zu aktivieren und in den Gerätemodus zu wechseln. Chrome simuliert nun ein mobiles Gerät und sendet Berührungsgesten an Ihre Website, so dass Sie testen können, wie Ihre Seite auf einem mobilen Browser reagiert.

Ausschluss der üblichen Verdächtigen

Als nächstes habe ich mir alle Event-Handler angesehen, die für eines der fehlerhaften Elemente und seine Vorgänger registriert waren, und sie alle deaktiviert. Aber das Problem bestand immer noch. Sie können die Ereignis-Listener eines Elements und seiner Vorfahren anzeigen, indem Sie ein Element in DevTools auswählen und die Registerkarte Ereignis-Listener auf der rechten Seite auswählen. Von dort aus können Sie alle Ereignis-Listener entfernen, um sicherzustellen, dass Ihr Ereignis nicht von einem JavaScript behandelt wird.

Stile heranzoomen

Dann habe ich im Styles Inspector nach einem Element oder Overlay mit der Eigenschaft pointer-events: none gesucht, aber ich konnte nichts mit dieser Eigenschaft finden. Dies ist eine dieser typischen CSS-Eigenschaften, die bewirkt, dass Ihre Seite nicht auf jede Art von Zeigerereignissen reagiert.

Danach habe ich in Devtools nach etwas gesucht, das mir bei der Fehlersuche in diesem Scroll-Problem helfen könnte. Es stellte sich heraus, dass DevTools ein Kontrollkästchen zum Hervorheben von Scrolling performance issues hat.

Als ich es einschaltete, leuchtete die ganze Seite sofort auf wie ein Weihnachtsbaum mit Warnungen, dass viele Elemente Touch Event Listener hätten: KEINE.

Über ein isoliertes Element, dem diese Warnung überlagert war, habe ich herausgefunden, dass einer meiner Vorgänger beschlossen hat, ein seltsames Verhalten des IE10 auf mobilen Geräten (?) zu beheben, indem er touch-action: none !important; auf allen interaktiven Elementen hinzugefügt hat.

Als ich diese Stilregel entfernte, reagierte die Seite sofort richtig auf meine Bildlaufgesten und die Benutzer waren viel zufriedener.