Layout-Shifts mit `scrollbar-gutter` verhindern
In diesem Guide zeige ich dir, wie du mit der CSS-Eigenschaft `scrollbar-gutter` Layout-Shifts durch Scrollbars vermeidest und ein stabiles Design erzielst
Layout-Shifts verhindern: Wie du mit scrollbar-gutter für ein stabiles Design sorgst
Layout-Shifts durch plötzlich erscheinende Scrollbars sind ein bekanntes Problem im Webdesign. Sie beeinträchtigen nicht nur die Ästhetik deiner Seite, sondern auch die Nutzererfahrung. In diesem Guide zeige ich dir, wie du mit der CSS-Eigenschaft scrollbar-gutter dieses Problem elegant löst
Das Problem: Unerwünschte Layout-Verschiebungen
Wenn der Inhalt einer Seite länger ist als der sichtbare Bereich, erscheint eine vertikale Scrollbar. Standardmäßig nimmt diese Scrollbar Platz ein und verschiebt den gesamten Seiteninhalt nach links, was einen Layout-Shift verursacht. Das wirkt unruhig und kann besonders bei responsiven Layouts zu unschönen Effekten führen
Um das einmal zu demonstrieren, hab ich ein kurzes Video aufgenommen, das zeigt, wie sich der Inhalt verschiebt sobald die Scrollbar erscheint. Achte dabei auf den Header
Die Lösung: CSS scrollbar-gutter
Seit 2024 unterstützen alle modernen Browser, inklusive Safari, die CSS-Eigenschaft scrollbar-gutter. Damit kannst du den Platz für die Scrollbar reservieren, auch wenn sie gerade nicht angezeigt wird. So bleibt das Layout stabil, unabhängig davon, ob eine Scrollbar sichtbar ist oder nicht
Anwendung: So setzt du scrollbar-gutter ein
Füge einfach folgende CSS-Regel zu deinem Container oder direkt zum body-Element hinzu:
body {
scrollbar-gutter: stable;
}Mit dem Wert stable wird immer Platz für die Scrollbar reserviert. Das verhindert, dass sich der Inhalt verschiebt, sobald die Scrollbar eingeblendet wird
Vorteile auf einen Blick
- Stabiles Layout: Keine Verschiebungen mehr, wenn die Scrollbar erscheint oder verschwindet
- Bessere User Experience: Der Nutzer bleibt orientiert, da sich der Inhalt nicht unerwartet bewegt
- Einfache Implementierung: Ein einziger CSS-Befehl genügt
Fazit
Mit scrollbar-gutter kannst du Layout-Shifts durch Scrollbars ganz einfach verhindern und sorgst für ein professionelles, stabiles Design. Probiere es aus und verbessere die Nutzererfahrung auf deiner Website nachhaltig
Weitere Infos findest du in der MDN-Dokumentation.