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 :-)

Mohlo by vás také zajímat

Next.js a revalidace předgenerovaných stránek při změně obsahu

Jak regenerovat staticky předgenerované stránky jinak, než periodicky? Typicky při změně obsahu na API nebo CMS? Je tu funkce revalidate().

Číst více

nám. Republiky 28
301 00 Plzeň
Česká republika
IČ: 28006402
DIČ: CZ28006402

© 2002 - 2024 iD-SIGN BRANDS MENTIONED ABOVE ARE PROPERTY OF THEIR RESPECTIVE OWNER.