Waagrechtes Scrollen beheben: warum Inhalte über den Rand ragen
Eine Seite darf sich auf keinem Gerät seitlich schieben lassen. Passiert es doch, ragt ein einzelnes Element über die Gerätebreite hinaus — der Prüfer nennt die überstehende Pixelzahl und, wo er es eindeutig zuordnen kann, das verursachende Element.
Was dazu geprüft wird
2 Prüfpunkte aus dem den erhobenen Signalen dieses Prüfbereichs — die Liste stammt aus dem Messkern, nicht aus diesem Text.
- Kein waagrechtes Scrollen
Ob Inhalte über die Bildschirmbreite hinausragen (WCAG 1.4.10). Der Bericht nennt die überstehende Pixelzahl und, wo eindeutig, das verursachende Element.
- Elemente passen in den Anzeigebereich
Ob einzelne Bausteine — Tabellen, eingebettete Inhalte, Bilder — breiter sind als das Gerät.
Jeder dieser Punkte steht mit Erklärung in der vollständigen Prüfpunktliste.
Worauf es in der Praxis ankommt
Die Ursache ist fast immer ein Element mit fester Breite: eine Tabelle, ein eingebettetes Video, ein Bild ohne Höchstbreite oder ein langer Text ohne Umbruchmöglichkeit — etwa eine Adresse oder ein Dateiname ohne Leerzeichen.
Der Effekt fällt am Schreibtisch nicht auf: Bei 1440 Pixeln passt fast alles. Erst bei 390 Pixeln steht das Element über, und die ganze Seite lässt sich verschieben — mit dem bekannten Ergebnis, dass beim Scrollen der Text seitlich wegrutscht.
Zu erkennen ist der Verursacher, indem man Element für Element ausblendet, bis das Scrollen verschwindet. Unser Bericht nimmt diesen Schritt vorweg, wo der Selektor eindeutig genug ist, und legt einen Beleg-Screenshot mit markiertem Element dazu.
Häufige Fragen
Warum sehe ich das Problem am Desktop nicht?
Weil dort genug Platz ist. Ein Element mit 500 Pixeln fester Breite passt in ein 1440-Pixel-Fenster und sprengt einen 390-Pixel-Bildschirm. Prüfen Sie mit schmalem Fenster oder in der Geräteansicht des Browsers.
Hilft overflow-x: hidden?
Es versteckt das Symptom und schafft ein neues: Der Inhalt ist dann nicht mehr erreichbar, statt nur schlecht erreichbar zu sein. Die Ursache muss weg, nicht die Scrollleiste.
Was ist mit langen Wörtern ohne Leerzeichen?
Sie sind ein eigener, häufiger Fall — Adressen, Dateinamen, Fachbegriffe. Dafür gibt es Umbruchregeln in CSS; ohne sie schiebt ein einziges Wort die ganze Seite auf.
Weitere Themen aus Responsive
- Zielgrößen auf dem Telefon: 24×24 Pixel als Untergrenze
- Text, der aus seinem Kasten läuft: Umbruch statt Abschneiden
- Auf welchen Geräten geprüft wird — und warum das Fenster verkleinern nicht genügt
- Der erste Bildschirm: wie viel Text ohne Scrollen sichtbar ist
- Die zentrale Schaltfläche: erreichbar ohne langes Scrollen
- Tabellen, Karten und Videos: Elemente, die nicht ins Telefon passen
- Bilder auf schmalen Geräten: Höchstbreite statt fester Breite
- Zweimal messen: warum ein schwankender Befund kein Befund ist
- Zoom nicht sperren: user-scalable=no schließt Menschen aus