Czy podczas tworzenia projektu od podstaw napotkaliście na tzw horyzontalny scroll i nie do końca wiedzieliście gdzie szukać jego przyczyny? Jeśli korzystasz z przeglądarki chrome możecie w prosty sposób wyszukać element, który jest jego sprawcą.

Wystarczy, że wkleisz do konsoli poniższy skrypt a wszystkie elementy na stronie zostaną otoczone czerwoną linią. Dzięki temu łatwo wychwycisz element, który wylatuje poza standardową szerokość twojej strony internetowej.

(function (debug) {
var w = debug.documentElement.offsetWidth,
t = debug.createTreeWalker(debug.body, NodeFilter.SHOW_ELEMENT),
b;
while (t.nextNode()) {
b = t.currentNode.getBoundingClientRect();
if (b.right > w || b.left < 0) {
t.currentNode.style.setProperty(‘outline’, ‘1px dotted red’, ‘important’);
console.log(t.currentNode);
}
};
}(document));