查找导致在 Google Chrome 中显示水平滚动条的元素

Question

当我将 Chrome 窗口的大小调整为 328 x 455 像素时，我仍然看到一个水平滚动条。如何找出导致此问题的元素？我一直在通过开发者控制台查看元素，但找不到元素。

然后我尝试了在 这里 找到的脚本，但没有记录任何内容。我在元素 body ， section1 和其他一些元素上试过它，但不知道还能做什么。

     $(function () {
        var f = $('body'); //document.getElementById("body");
        var contentHeight = f.scrollHeight;
        var declaredHeight = $(f).height();

        var contentWidth = f.scrollWidth;
        var declaredWidth = $(f).width();
        if (contentHeight > declaredHeight) {
            console.log("invalid height");
        }
        if (contentWidth > declaredWidth) {
            console.log("invalid width");
        }
    });

原文由 Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

.slide-content .scroller {
  width: 1024px;
}

“最快”方式：在检查器中添加了这个：

 * {
  outline: 1px solid #f00 !important;
}

罪魁祸首出现了

原文由 Luca 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 Nextjs 中，将 overflow-x:hidden 添加到 global.css 中的 *{} 解决了这个问题。

原文由 Musa Kazim 发布，翻译遵循 CC BY-SA 4.0 许可协议