如何追蹤導致網頁水平滾動的元素？

Question

由於使用不同的電網系統開發負責網頁，我有時面對的問題是，某些要素的溢出，從而有問題的尺寸/墊襯/利潤率使頁面水平滾動。

我發現它有時與點&點擊（選擇鉻元素工具）難以追蹤這些元素，因爲 - 不知道爲什麼 - 他們有時不可選。

怎會快速識別行爲異常的元素呢？

Answer 1

一個解決辦法是通過所有的元素進行迭代，並將其打印到console如果他們的width比window的更大。

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

擺脫水平滾動納克一個應分析各成分的布點和修改它，直到這個片斷輸出沒有元素