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

Question

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

我发现有时使用点击(chrome 中的选择元素工具)很难找到这些元素，因为 - 不知道为什么 - 它们有时是不可选择的。

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

Answer 1

解决方案是遍历所有元素，如果它们的 width 大于 window，则将它们打印到 console。

在 chrome 中，单击这些元素会突出显示它们在页面上并显示在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. ');

要摆脱水平滚动，应分析每个组件的布局并对其进行修改，直到此代码段不打印任何元素为止