Detekce prvků přetečení CSS

Čas od času narazíte na nepříjemnost CSS, jejíž objevení vyžaduje trochu chytrosti. Jeden takový případ zvedá svou ošklivou hlavu do nechtěných a nečekaných posuvníků. Když vidím nechtěné posuvníky, obvykle otevřu vývojářské nástroje, kliknu na inspektor prvků a přejíždím kolem, dokud nenajdu zlotřilý prvek HTML. Jako vizuální člověk považuji tento proces za efektivní, ale ne efektivní. Nedávno jsem byl upozorněn na programový způsob, jak najít element darebáka pomocí JavaScriptu!

K nalezení prvku vyvolávajícího démona posuvníky můžete použít následující JavaScript:

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.offsetWidth) {
      console.log('Found the worst element ever: ', el);
  }
});

Poté, co byl prvek přihlášen do konzole, můžete jej určit a hrát si s tresty v inspektoru prvků, jak uznáte za vhodné.

Vždy se provinil tím, že se vracím ke svým starým způsobům, tj. vizuální kontrole, ale mít programové řešení je mnohem rychlejší a pohodlnější!