Scrollen mit CSS ausblenden oder deaktivieren

Verwenden Sie CSS je nachdem, ob Inhalte abgeschnitten, das Scrollen vollständig gesperrt oder nur der Scrollbalken verborgen werden soll. overflow: hidden schneidet überstehende Inhalte ab und entfernt den sichtbaren Scrollbalken; es ist keine rein optische Änderung.

Die passende CSS-Regel wählen

Die Kurzform overflow steuert den horizontalen und vertikalen Überlauf. Verwenden Sie hidden, wenn Abschneiden beabsichtigt ist. Verwenden Sie scrollbar-width: none nur, wenn der Bereich weiterhin auffindbar scrollbar bleibt. Setzen Sie overflow-x erst nach der Korrektur der Ursache als letzte Absicherung ein.

Scrolling deaktivieren und Überlauf abschneiden

Begrenzen Sie eine Komponente und wählen Sie nur die benötigte Achse. Der normale Scrollbalken verschwindet und Inhalt außerhalb des Bereichs wird abgeschnitten.

<div class="preview-panel"><p>Visible text.</p><p>Extra text is clipped.</p></div>

.preview-panel { max-block-size: 8rem; overflow-y: hidden; border: 1px solid #777; padding: 1rem; }

Das Ergebnis ist kein vertikaler Scrollbalken und kein Text unterhalb der unteren Kante. Verwenden Sie dies nur, wenn der abgeschnittene Inhalt entbehrlich ist oder durch ein anderes Steuerelement angezeigt wird. Für ein Modal kann eine vorübergehende Klasse auf html und body den Seitenüberlauf sperren; prüfen Sie Maus, Touch, Tastatur und das Schließen.

Scrollbalken ausblenden und Scrollen behalten

Wenn Leser den gesamten Inhalt erreichen müssen, behalten Sie overflow-y: auto und blenden Sie den Scrollbalken mit der Standard-Eigenschaft und einer begrenzten Fallback-Regel aus.

.scroll-area { max-block-size: 10rem; overflow-y: auto; }
@supports (scrollbar-width: none) { .scroll-area { scrollbar-width: none; } }
@supports not (scrollbar-width: none) { .scroll-area::-webkit-scrollbar { display: none; } }

Der Bereich bleibt mit Mausrad, Touch, Tastatur oder Trackpad scrollbar. ::-webkit-scrollbar ist nicht standardisiert. Das Ausblenden kann die Bedienbarkeit verschlechtern; geben Sie daher einen sichtbaren Hinweis oder ein alternatives Steuerelement.

Horizontalen Überlauf verhindern

Ein horizontaler Scrollbalken weist meist auf einen Layoutfehler hin: feste Medienbreite, ein nicht schrumpfendes Flex-Element oder eine unteilbare Zeichenkette. Beheben Sie zuerst die Ursache.

.page-content { max-inline-size: 100%; overflow-x: hidden; }
.page-content img, .page-content video { display: block; max-inline-size: 100%; block-size: auto; }
.page-content code { overflow-wrap: anywhere; }

overflow-x: hidden ist nur eine Abschneide-Absicherung. overflow-x: clip verhindert zusätzlich programmgesteuertes Scrollen und darf keine benötigten interaktiven Inhalte umschließen.

overscroll-behavior nicht verwechseln

overscroll-behavior: contain verhindert Scroll-Chaining am Rand eines scrollbaren Modals. Es blendet keinen Scrollbalken aus und deaktiviert das Scrollen nicht.

Barrierefreiheit und Browserhinweise

Verbergen Sie wichtige Texte, Navigation, Felder oder Steuerelemente nie ohne klare Alternative. Prüfen Sie den Tastaturfokus: Tab darf keinen abgeschnittenen Inhalt erreichen, der nicht sichtbar gemacht werden kann. overflow: hidden kann fokussierten oder per Skript gescrollten Inhalt noch zeigen, clip dagegen nicht. scrollbar-gutter: stable reserviert Platz, blendet aber nichts aus. Testen Sie enge und breite Ansichten sowie Maus, Touch, Page Down, Pfeiltasten, Tab und ein fokussiertes Element am Rand.

Prüfen Sie vor der Veröffentlichung den normalen und den eingeschränkten Zustand bei schmalen und breiten Viewports. Ein Modal muss das Scrollen der Seite beim Schließen wiederherstellen, und sein eigener Inhalt muss erreichbar bleiben. Untersuchen Sie übergroße Bilder, lange URLs, vorformatierten Code sowie Flex- oder Grid-Kinder, statt Überlauf nur durch Abschneiden zu verdecken.