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

【问题标题】：How to track down elements causing horizontal scroll on a web page?如何追踪导致网页水平滚动的元素？
【发布时间】：2017-11-12 22:36:48
【问题描述】：

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

我发现有时使用指向和单击（chrome 中的选择元素工具）很难追踪这些元素，因为 - 不知道为什么 - 它们有时是不可选择的。

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

【问题讨论】：

您有时可以通过按 CTRL+A 选择所有内容来发现重叠元素。您也可以使用浏览器开发人员控制台并删除代码部分，直到水平条被删除以跟踪问题元素。下面的 Matyas 解决方案非常聪明，我一定会尝试一下。

标签： html css twitter-bootstrap grid-system css-grid

【解决方案1】：

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

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

要摆脱水平滚动，需要分析每个组件的布局并对其进行修改，直到这个 sn-p 不打印任何元素

【讨论】：

这很简洁，但并没有真正解决问题 - 它只显示宽度超过窗口宽度的单个元素（显然）但问题可能更复杂（元素组，边距实例）。