Jak na nechtěné horizontální scrollbary

Když kóduji stránky, tak se mi občas u složitějších responzivních šablon stane, že nějaký element přesáhne šířku dokumentu a způsobí horizontální scrollbary. Ne vždy si toho rychle všimnu, protože k tomuto přetečení může docházet jenom při některých šířkách a i oprava se může zvrhnout v detektivní práci.

Mazání jednotlivých nodů dokud přesah nezmizí nevede vždy rychle k cíli. Se zkoumátkem jsem také ne vždy uspěl. Využíval jsem i Firefox a jeho režim 3D pohledu, který dokázal vykreslit hranice všech vrstev ve 3D včetně hranic základního dokumentu. Tento režim byl již ale z Firefoxu odstraněn a tak nezbývalo podívat se po jiném řešení.

Na CSS-Tricks jsem našel skvělý článek https://css-tricks.com/findingfixing-unintended-body-overflow/ s šikovným snippetem, který vám po zkopírování do konzole najde všechny viníky a vypíše je v seznamu.

var docWidth = document.documentElement.offsetWidth;

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

Pokud podobný problém občas řešíte i vy, tak to také zkuste takto. Pokud vám to pomůže, tak enjoy :-)