Position: behoben, hat eine sehr schlechte Leistung auf mobilen/Tablet-Geräten beim Scrollen

Question

Ich benutze position: fixed in meiner Website, um die Navigationsleiste im View-Port zu beheben, genau wie Facebooks blauen Balken, aber wenn wir es auf Handy versucht/Tablet-Geräte (mit ihren niedrigen Verarbeitungsleistungen) diese feste Leiste macht einen sehr schlechten Schlag auf die Leistung, die eine sehr schlechte Benutzererfahrung beim Scrollen,

wir haben eine sehr gute Artikel, um das Scrollen zu verbessern, und zwar sie tat, wie:

• http://www.html5rocks.com/en/tutorials/speed/scrolling/
• http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
• https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/window-scroll-event.html

Nach vielen Änderungen auf der Grundlage dieses Artikel, erreichen wir zu dem Punkt, wo position: fixed die einzige Untersuchung ist für uns in.

Der Standort verfügt über eine ultraglatte zu verbessern links Scrollen, wenn wir es zu position: absolute ändern. Aber mit der Behebung, hat das Scrollen einen sehr schlechten Nachteil in dem Maße, dass es den Safari-Browser auf dem ipad beim Scrollen in einer bestimmten Weise hängen konnte, wussten Sie, wie man position: fixed mit einer guten Leistung auf Tablet/Mobilgeräten verwenden?

Answer 1

Wenn Ihr "Tablette/mobile Geräte", die Performance-Problem haben, einen Webkit-Engine haben Sie wahrscheinlich hier Antwort finden konnte: Chrome slow scrolling with fixed position elements

Schnelle Antwort: versuchen, auf festen Block hinzuzufügen -webkit-transform: translateZ(0);.

Answer 2

Um einen reibungslosen Scrollen in mobilen Gerät zu bekommen, auch wenn mit "position: absolute",

Sie müssen nur auf die Div das CSS-Attribut

„-webkit-Überlauf-Scrolling hinzufügen : berühren;"