ウェブページ上で水平スクロールを引き起こす要素を追跡するには？

Question

異なるグリッドシステムを使用して責任のあるWebページを開発する際に、特定の要素がオーバーフローし、問題のサイズ/パディング/余白があり、ページを水平方向にスクロール可能にするという問題に直面することがあります。

私は時にはポイント&クリック（chromeの要素ツールを選択）するのが難しいので、これらの要素を追跡するのは難しいと思います。

どのようにして誤った要素をすぐに特定できますか？

Answer 1

解決策は、がwindowのサイズより大きい場合、すべての要素を反復してconsoleに印刷することです。 Chromeで

、これらの要素の INGだろうハイライト彼らにページをクリックしてDOMエクスプローラに表示し

コード：

// 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. ');

水平スクロールを削除するにはこのスニペットで要素が印刷されない限り、各コンポーネントのレイアウトを分析して変更します。