Finden/Beheben von unbeabsichtigtem Body-Überlauf

Ughck, versehentlicher horizontaler Scrollbalken, oder?

Das kann mühsam sein, aber normalerweise finden Sie das problematische Element, indem Sie sich durch die DevTools navigieren und Elemente auswählen, bis Sie etwas finden, das zu weit nach rechts ragt (links ragt es nicht so leicht aus dem Rand und löst einen Scrollbalken aus) und es anpassen.

Manchmal benutze ich die Funktion „Knoten löschen“ der DevTools, um Dinge von der Seite zu entfernen, bis der Scrollbalken verschwindet. Dann weiß ich, welches Element es verursacht hat, und kann von dort aus weiter untersuchen. Hier ist ein superkurzes Video einer solchen Fehlerbehebung

In einigen Fällen gibt es möglicherweise ein Element, das buchstäblich breiter als das Dokument ist, was zu horizontalem Überlauf-Scrolling führen kann. Sie könnten ein wenig JavaScript verwenden, um den Schuldigen zu finden.

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Was etwas wie folgendes finden könnte

Ein weiterer kleiner Trick, der mir manchmal hilft, ist, so zu scrollen, dass der überlaufende Bereich sichtbar wird, und dann auf „Element untersuchen“ in diesem Bereich zu klicken, um zu sehen, ob Sie das problematische Element ansprechen können.

Versteckter horizontaler Überlauf

Manchmal ist horizontaler Überlauf schwerer zu fassen. Zum Beispiel, wenn er keinen horizontalen Scrollbalken auslöst, Sie aber den Überlauf trotzdem durch Wischen mit einem Touchpad oder durch Ziehen und Auswählen sichtbar machen können.

Ich habe eine einfache Demo dieses Szenarios erstellt, sehen Sie sich dieses GIF an

Was dort passiert, ist, dass ein Element dort, außerhalb des Bildschirms, mit opacity: 0; positioniert ist, sodass Sie es nicht sehen können. Normalerweise würde das horizontalen Überlauf und einen horizontalen Scrollbalken auslösen, aber wir verstecken ihn explizit

body {
  overflow-x: hidden;
}
.hidden-thing {
  position: absolute;
  left: 100%;
  width: 50px;
  height: 50px;
  opacity: 0;
}

In den meisten Szenarien, wenn ein Element außerhalb der Grenzen eines Elements mit verstecktem Überlauf verborgen ist, ist es einfach aus der visuellen Welt verschwunden. Aber mit dem Dokument selbst können Sie immer noch dorthin scrollen. Seltsam, aber wahr. Es ist wahrscheinlich sogar ein Fehler, denn wenn Sie overflow: hidden; statt overflow-x: hidden; verwenden, stoppt es. Es ist nur üblicher und praktischer, overflow-x zu verwenden.

Beachten Sie, dass dies ein Problem in Desktop-Blink- oder WebKit-basierten Browsern ist. Kein Problem in Gecko oder auf Mobilgeräten, soweit ich das gesehen habe.

Ausgeblendete Offscreen-Elemente sind nicht gerade selten. Ich denke, das wird mit Animationen, Übergängen, 3D-Effekten, Material Design und Übergangs-Interfaces immer häufiger. Ich bin auf dieses Problem gestoßen, als ich das Suchformular auf CodePen entworfen habe, das sich beim Klicken auf etwas herausgleitet. Vereinfacht wäre das so

Die Lösung in diesem Fall ist, *den Überlauf auf einem Elternelement zu verstecken*, anstatt sich auf den versteckten Überlauf des Körpers zu verlassen.