Ich verstehe, dass Ihre Frage im Grunde genommen darin besteht, das sanfte Scrollen zu deaktivieren. Aber ich werde dir ein wenig anders antworten, damit das funktioniert.

Warum anders?

Auch wenn Sie ein reibungsloses Scrollen von Benutzern feststellen können, können Sie den Benutzer nicht zwingen, es zu deaktivieren. Mit anderen Worten, Sie versuchen, das Problem zu lösen, anstatt es zu lösen. also lass es lösen!

Intro: Pixel-zu-Bildschirm-Pipeline

In jedem Frame führt der Browser die folgenden Schritte durch, um die Seite auf dem Bildschirm zu rendern.

• JavaScript. Normalerweise wird JavaScript verwendet, um Arbeiten zu bearbeiten, die zu visuellen Änderungen führen, sei es die Animate-Funktion von jQuery, das Sortieren eines Datensatzes oder das Hinzufügen von DOM-Elementen zur Seite. Es muss jedoch kein JavaScript sein, das eine visuelle Änderung auslöst: CSS-Animationen, Übergänge und die Web-Animations-API werden ebenfalls häufig verwendet.

• Stilberechnungen. Dies ist der Prozess des Herausfindens, welche CSS-Regeln auf welche Elemente basierend auf passenden Selektoren, z. .headline oder .nav & gt; .nav__gegenstand. Sobald Regeln bekannt sind, werden sie angewendet und die endgültigen Stile für jedes Element berechnet.

• Layout. Sobald der Browser weiß, welche Regeln für ein Element gelten, kann er berechnen, wie viel Platz er benötigt und wo er sich befindet. Das Layout-Modell des Webs bedeutet, dass ein Element andere beeinflussen kann, z. Die Breite des Elements wirkt sich in der Regel auf die Breite des untergeordneten Elements aus und so weiter auf und ab, sodass der Prozess für den Browser ziemlich kompliziert sein kann.

• Farbe. Malen ist das Füllen von Pixeln. Es beinhaltet das Zeichnen von Text, Farben, Bildern, Rändern und Schatten, im Wesentlichen jeden visuellen Teil der Elemente. Die Zeichnung wird normalerweise auf mehrere Oberflächen, oft als Ebenen bezeichnet, ausgeführt.

• Zusammensetzung. Da die Teile der Seite in potenziell mehrere Ebenen gezeichnet wurden, müssen sie in der richtigen Reihenfolge auf den Bildschirm gezeichnet werden, damit die Seite korrekt gerendert wird. Dies ist besonders wichtig für Elemente, die sich gegenseitig überlappen, da ein Fehler dazu führen kann, dass ein Element falsch über dem anderen erscheint.

Details und Quelle: Ссылка

Schritt 1:

Erster Schritt ist das Entfernen von kostspieligen css-Eigenschaften. Sie können möglicherweise nicht viele entfernen, aber Sie können rgba(255,255,255,1); durch #fff ersetzen, wodurch die Alpha-Ebene entfernt wird.

Überprüfen Sie dies für weitere Details: Ссылка Einige Eigenschaften müssen nicht layout oder paint ausführen und sie sind weniger schwer als andere.

Schritt 2:

Überprüfen Sie auf forced synchronous layout Trigger. Diese passieren, wenn Sie den Browser zwingen, ein layout auszuführen, während es in dem Javascript-Schritt ist, und dann zu Javascript zurückkehren, anstatt die Pipeline in jedem Frame reibungslos zu durchlaufen. Vermeiden Sie dazu, Layout-Attribute zu erhalten und diese anschließend direkt in einer Schleife zu setzen.

Hier ist eine Liste der Gründe für das Synchronisierungslayout: Ссылка

Weitere Informationen: Ссылка

Schritt 3:

Verschieben Sie Komponenten auf der Seite, die regelmäßig neu gezeichnet werden müssen, in neue Ebenen.

Der Browser muss jedes Mal neu gezeichnet werden, wenn Sie scrollen oder eine Animation abgespielt wird. Um ein vollständiges Seiten-Repaint zu vermeiden und nur den Teil, der sich verändert, neu zu streichen, verschieben Sie diesen Teil (zB Parallaxe, Navigation, Animation) auf eine neue Ebene im Browser (denken Sie darüber wie Photoshop-Ebenen)

Verwenden Sie dazu die will-change css-Eigenschaft, um den Browser anzuweisen, sie auf eine neue Ebene zu verschieben, und verwenden Sie transform: translateZ(0); , wenn Sie den Browser zwingen möchten, ihn zu verschieben.

Verwenden Sie inspect-Element, um zu versuchen, die spezifische Ursache zu behandeln. Wenn Sie FireBug noch nicht installiert haben, installieren Sie es und verwenden Sie es anstelle des standardmäßigen inspect-Elements. Dadurch erhalten Sie mehr Codedetails und können das Skript durchgehen, um das Problem zu finden. Es gibt auch Plugins für FireBug für verschiedene Frameworks, die die Diagnose unterstützen können, wenn Sie eines dieser Frameworks verwenden.

Wir können Annahmen über die Ursache machen oder mit Schrotflintenlösungen kommen; Aber nur Sie können Ihren Code diagnostizieren, um die Besonderheiten zu finden.