Verbessern Sie den Interaction to Next Paint, indem Sie auf JavaScript-Scrolling verzichten

Ersetzen Sie JavaScript-Scrolling noch heute durch CSS

Dieser Blogbeitrag hat eine gewisse Geschichte. Bis 2017 war die einzige Möglichkeit, ein konsistentes sanftes Scroll-Verhalten hinzuzufügen, die Verwendung einer JavaScript-Bibliothek. Und genau das taten viele Entwickler. Die Core Web Vitals existierten noch nicht und jeder verwendete jQuery als seine Haupt-JavaScript-Bibliothek.

Springen wir nun in die Gegenwart. Es gibt viel bessere, schnellere und einfachere Alternativen zu JavaScript-basiertem Anchor-Scrolling. Allerdings sehe ich als Core Web Vitals-Berater diese immer noch jeden Tag.

Zuletzt überprüft von Arjen Karel im Februar 2026

Warum JavaScript-basiertes Scrolling „schlecht“ ist

JavaScript-basiertes Scrolling ist aus 2 Gründen schlecht: Es ist kompliziert und es ist langsam.

Kompliziert: JavaScript-basiertes Scrolling ist unnötig kompliziert. Sie müssen schwer lesbaren Code schreiben und pflegen, und obwohl die Window.scrollTo()-Methode diesen Code deutlich einfacher gemacht hat, ist er immer noch viel schwieriger zu pflegen als eine einzige Zeile CSS.

Langsam. JavaScript neigt dazu, den Main Thread zu blockieren, und ist immer langsamer als sein CSS-Gegenstück. Abhängig davon, wie die Scroll-Funktion implementiert wurde, kann sie den Main Thread für eine beträchtliche Zeit blockieren und eine erhebliche Verzögerung der Interaction to Next Paint-Metrik verursachen! Laut dem 2025 Web Almanac liegt die mediane Total Blocking Time auf Mobilgeräten bei 1.916 Millisekunden. Jede unnötige JavaScript-Funktion, die um den Main Thread konkurriert, verschlimmert das.

Warum CSS Smooth Scrolling „gut“ ist

Ich habe darüber gesprochen, warum JavaScript-basiertes Scrolling schlecht ist. Das Gegenteil gilt für CSS-basiertes sanftes Scrolling. Es ist wirklich so einfach wie das Hinzufügen des Folgenden zu Ihrem Stylesheet:

html{ scroll-behavior: smooth;}

Einfach und effektiv

Der CSS-Einzeiler html { scroll-behavior: smooth; } ist super einfach zu implementieren und effizienter als JavaScript-basierte Lösungen. Diese einzelne Zeile Code ermöglicht sanftes Scrolling für die gesamte Seite ohne schwer zu wartende JavaScript-Funktionen. Wenn Sie noch weiter gehen und unnötiges JavaScript verzögern oder entfernen möchten, wird Ihre INP-Verarbeitungszeit es Ihnen danken.

Bessere Performance

CSS-basiertes sanftes Scrolling wird nativ vom Browser verarbeitet und wird in allen Fällen JavaScript-Implementierungen übertreffen. Dies ist besonders wichtig für die Optimierung der Interaction to Next Paint (INP)-Metrik, da es den Main Thread des Browsers weniger belastet. JavaScript-Scroll-Handler müssen auf dem Main Thread laufen, und jede dort verbrachte Millisekunde ist eine Millisekunde, die die nächste Benutzerinteraktion verzögert. CSS-Scroll-Verhalten läuft vollständig außerhalb des Main Threads. Wenn Sie noch JavaScript haben, das während Interaktionen ausgeführt werden muss, lesen Sie mehr darüber, wie Sie dem Main Thread nachgeben.

Sanftes Anchor-Scrolling ist nur der Anfang. CSS übernimmt immer mehr Scroll-Aufgaben, die früher JavaScript erforderten. Scroll-gesteuerte Animationen (Chrome 115+, Safari 26) ermöglichen es Ihnen, den Animationsfortschritt an die Scroll-Position zu koppeln und ersetzen requestAnimationFrame-Scroll-Handler vollständig. Scroll-ausgelöste Animationen (Chrome 145) starten zeitbasierte Animationen beim Überqueren eines Scroll-Offsets und ersetzen IntersectionObserver für Einblendeffekte. Und Scroll-State-Container-Queries (Chrome 133+) ermöglichen es Ihnen, Elemente basierend darauf zu stylen, ob sie fixiert, eingerastet oder scrollbar sind – kein JavaScript nötig. Der Trend ist klar: Verlagern Sie Scroll-Logik aus JavaScript in CSS, wo immer Sie können.

Browser-Kompatibilität

CSS Smooth Scrolling hat laut CanIUse eine globale Browser-Unterstützung von 95 %. Es ist seit März 2022 Baseline in allen großen Browsern. Ältere Browser, in denen sanftes Scrolling nicht unterstützt wird, fallen einfach auf den standardmäßigen direkten Sprung zum Anker zurück.

Einfache Anpassung

CSS ermöglicht es Ihnen, das Scroll-Verhalten einfach anzupassen. Zum Beispiel können Sie mit der Eigenschaft scroll-margin-top den oberen Abstand zum gescrollten Element festlegen:

h1, h2, h3 {scroll-margin-top: 5rem;} 

Oder noch einfacher mit der 'target'-Pseudoklasse

:target {scroll-margin-top: 5rem;} 

Bewegungspräferenzen respektieren

Einige Benutzer leiden unter Bewegungskrankheit durch Scroll-Animationen. Wenn Sie Ihr sanftes Scrolling in eine prefers-reduced-motion-Media-Query einschließen, erhalten diese Benutzer stattdessen sofortige Sprünge:

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

Dies wendet sanftes Scrolling nur für Benutzer an, die keine reduzierte Bewegung angefordert haben. Benutzer mit vestibulären Störungen oder Bewegungsempfindlichkeit sehen den standardmäßigen sofortigen Scroll.

Vollständiges Beispiel

Um diesen Code in Aktion zu sehen, klicken Sie einfach auf das Inhaltsverzeichnis oben auf dieser Seite. Sie werden ein schönes sanftes Scrollen zum angeklickten Anker bemerken.

Hier ist ein vereinfachtes Beispiel zum Kopieren und Wiederverwenden

<html>

<head>
    <title>Smooth scroll to target</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
        :target {
            scroll-margin-top: 5rem;
        }
        .largedivider {
            height: 1000px;
        }

    </style>

</head>

<body>
    <nav>
        <a href="#target">scroll to target</a>
    </nav>
    <div class="largedivider"> -- </div>
    <h2 id="target">scroll to me</h2>
    <div class="largedivider"> -- </div>
</body>

</html>