Wie kann man Elemente ausfindig machen, die ein horizontales Scrollen auf einer Webseite verursachen?

Question

Bei der Entwicklung von verantwortungsvollen Webseiten mit verschiedenen Grid-Systemen stehe ich manchmal vor dem Problem, dass bestimmte Elemente überlaufen, problematische Größen/Abstände/Ränder haben und die Seite horizontal scrollbar ist.

Ich fand es manchmal mit dem Punkt & klicken (Element-Tool in Chrom auswählen) schwer, diese Elemente zu verfolgen, da - weiß nicht warum - sie sind manchmal nicht wählbar.

Wie könnte man schnell fehlerhafte Elemente identifizieren?

Answer 1

Eine Lösung wäre, alle Elemente zu durchlaufen und sie an die console zu drucken, wenn ihre width größer ist als die der window.

In Chrom, Klick ing auf dieser Elemente würde Highlight sie auf der Seite und zeigen sie im DOM Explorer

Der Code:

// retrieve all elements 
 
var allElements = document.querySelectorAll('*'); 
 
var bigElements = 
 
    // use the filter function to filter get only elements you need 
 
    Array.prototype.filter.call(
 
    allElements, 
 
       // compares occupied width with window width 
 
    element => element.getBoundingClientRect().width > window.innerWidth 
 
); 
 

 
// print resulting elements 
 
bigElements.forEach(element => console.log(element)); 
 
if (!bigElements.length) console.log('Yaay! All elements fit. ');

Um horizontale Scrolli loszuwerden ng man soll das Layout jeder Komponente analysieren und modifizieren, bis dieser Ausschnitt keine Elemente ausdruckt