it-swarm.com.de

Langsames Scrollen auf Mobilgeräten / ios bei Verwendung eines Überlaufs: Scrollen

Um ein Off-Canvas-Menü einzurichten, muss der Body auf "overflow: hidden" gesetzt werden, um das Scrollen aus dem Body zu entfernen und es mit "overflow-y: scroll" wieder in einen Container um den Inhalt einzufügen. Wenn ich das mache, scheint es das Scrollen auf mobilen iOS-Geräten zu verlangsamen.

Gibt es ein Leistungsproblem beim Verschieben der Bildlaufleiste vom Körper?

44
grasesed

Anstelle eines Leistungsproblems ist dies wahrscheinlich darauf zurückzuführen, dass Sie auf Ihrem iOS-Gerät keinen Bildlauf von "Momentum" sehen

Dies kann gelöst werden, indem Sie Ihrem Bildlaufelement '-webkit-overflow-scrolling: touch' hinzufügen, d. H .:

.scrolling-content {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   height:100%; /*A value other than height:auto needs to be set*/
}

Standardmäßig verwenden iOS-Geräte das 'Momentum'-Scrollen für den Körper, aber das Hinzufügen von' overflow-y: scroll 'zu einem Element setzt ein Element nicht standardmäßig auf' Momentum'-Scrollen

Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Hinweis: Es gibt eine Reihe von Gotcha/Bugs bei der Verwendung von -webkit-overflow-scrolling: Berühren Sie in bestimmten Browsern

101
sjm