javascript frontend

Jak na nechtěné horizontální scrollbary

Když vás překvapí, že je vaše stránka širší než viewport a netušíte příčinu, může se hodit následující tip

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 výpíš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 :-)