查找/修复意外的 Body 溢出

Ughck，意外的水平滚动条，对吧？

这可能很痛苦，但你通常可以通过在 DevTools 中四处浏览并选择元素来找到有问题的元素，直到你找到一个元素延伸到右侧太远（向左侧溢出页面通常不会以相同的方式触发滚动条）并调整它。

有时我会使用 DevTools 的“删除节点”功能从页面中删除内容，直到滚动条消失。 然后我知道哪个元素导致了这个问题，并且可以从那里深入研究。 这是一个关于这种故障排除的超级快速视频

在某些情况下，可能存在一个元素实际上比文档本身更宽，这可能会导致水平溢出滚动。 你可以使用一些 JavaScript 来帮助你找到罪魁祸首。

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

这可能会找到类似的东西

另一个对我来说有时很有帮助的小技巧是，滚动到可以看见溢出区域的地方，然后单击并检查该区域内的元素，看看是否可以定位到有问题的元素。

隐藏的水平溢出

有时水平溢出更难以捉摸。 例如，它不会触发水平滚动条，但你仍然可以通过触摸板滑动或选择并拖动来显示溢出。

我制作了该场景的基本演示，请查看此 GIF

发生的情况是，有一个元素位于屏幕外，并且具有 opacity: 0;，因此你无法看到它。 通常情况下，这会触发水平溢出和水平滚动条，但我们明确地隐藏了它

body {
  overflow-x: hidden;
}
.hidden-thing {
  position: absolute;
  left: 100%;
  width: 50px;
  height: 50px;
  opacity: 0;
}

在大多数情况下，当一个元素被隐藏在具有隐藏溢出元素的边界之外时，它只是在视觉世界中消失了。 但是对于文档本身，你仍然可以强制滚动到那里。 很奇怪，但事实如此。 它可能是一个错误，因为如果你使用 overflow: hidden; 而不是 overflow-x: hidden;，它就会阻止它。 只是使用 overflow-x 更加常见和实用。

请注意，这是桌面 Blink 或基于 WebKit 的浏览器中的一个问题。 在 Gecko 或我所见过的任何移动设备中都不是问题。

拥有隐藏的屏幕外元素并不罕见。 我认为随着动画、过渡、3D 效果、材质设计、过渡界面，它变得越来越常见。 我在设计 CodePen 上的搜索表单时遇到了这个问题，该表单在你点击某个东西时会滑出来。 简而言之，它就像这样

在这种情况下，解决方案是隐藏父元素上的溢出，而不是依赖于 body 上的隐藏溢出。