Was tun gegen unerwünschte horizontale Scrollbars

Wenn ich Webseiten code, passiert es mir bei komplexeren responsiven Templates gelegentlich, dass ein Element über die Breite des Dokuments hinausragt und horizontale Scrollbars verursacht. Das fällt mir nicht immer sofort auf, weil dieser Überlauf nur bei bestimmten Breiten auftreten kann, und selbst die Behebung kann in Detektivarbeit ausarten.

Einzelne Nodes zu löschen, bis der Überlauf verschwindet, führt nicht immer schnell zum Ziel. Auch mit dem Element-Inspektor hatte ich nicht immer Erfolg. Ich habe außerdem Firefox und seine 3D-Ansicht genutzt, die die Grenzen aller Ebenen in 3D darstellen konnte, einschließlich der Grenzen des Basisdokuments. Dieser Modus wurde jedoch aus Firefox entfernt, sodass mir nichts anderes übrig blieb, als mich nach einer anderen Lösung umzusehen.

Auf CSS-Tricks habe ich einen großartigen Artikel gefunden: https://css-tricks.com/findingfixing-unintended-body-overflow/ – mit einem praktischen Snippet, das, in die Konsole kopiert, alle Übeltäter findet und in einer Liste ausgibt.

var docWidth = document.documentElement.offsetWidth;

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

Wenn Sie ein ähnliches Problem ab und zu auch lösen müssen, probieren Sie es ebenfalls so. Und wenn es Ihnen hilft: enjoy :-)