如何在网页上追踪导致水平滚动的元素？

Question

随着使用不同网格系统开发负责任的网页，我有时会遇到某些元素溢出的问题，有大小/填充/边距有问题，从而使页面可以水平滚动。

我发现它有时带点＆amp;点击（在chrome中选择元素工具）很难跟踪这些元素，因为 - 不知道为什么 - 它们有时是不可选择的。

如何快速识别出行为不端的因素？

Answer 1

解决方案是迭代所有元素，如果console大于width，则将其打印到window。

在Chrome中，点击对这些元素进行突出显示 并在DOM资源管理器中显示< / p>

代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

要摆脱水平滚动，应分析每个组件的布局并进行修改，直到此片段不打印元素