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

Question

当我将 Chrome 窗口大小调整为 328 x 455 像素时，我仍然看到水平滚动条。 我怎样才能找出导致这种情况的因素？我一直在通过开发者控制台查看元素，但找不到该元素。

然后我尝试了我在here找到的脚本，但没有记录任何内容。 我在元素

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");
        }
    });

Answer 1

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

“最快测试”方式：在检查器中添加此：

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

罪魁祸首出现了

Answer 2

Chris Coyier 的一篇优秀文章解释了您需要了解的有关此问题的所有信息。

读完本文后，我在控制台中使用此代码来查找负责垂直滚动的元素：

在浏览器中按

F12

，然后选择

console

并将以下代码粘贴到此处，然后按 Enter：

var all = document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth;
for (; i < all.length; i++) {
    rect = all[i].getBoundingClientRect();
    if (rect.right > docWidth || rect.left < 0){
        console.log(all[i]);
        all[i].style.borderTop = '1px solid red';
    }
}

更新：
如果上面的代码不起作用，它可能是 iframe 内的一个元素使页面垂直滚动。

在这种情况下，您可以使用以下代码搜索

iframes

：

var frames = document.getElementsByTagName("iframe");
for(var i=0; i < frames.length; i++){
   var frame = frames[i];
   frame = (frame.contentWindow || frame.contentDocument);
   var all = frame.document.getElementsByTagName("*"),rect,
       docWidth = document.documentElement.offsetWidth;
   for (var j =0; j < all.length; j++) {
       rect = all[j].getBoundingClientRect();
       if (rect.right > docWidth || rect.left < 0){
           console.log(all[j]);
           all[j].style.borderTop = '1px solid red';
       }
   }
}

Answer 3

通过将以下 js 代码复制粘贴到 URL 地址栏中来查找罪魁祸首。

javascript:(function(d){var w=d.documentElement.offsetWidth,t=d.createTreeWalker(d.body,NodeFilter.SHOW_ELEMENT),b;while(t.nextNode()){b=t.currentNode.getBoundingClientRect();if(b.right>w||b.left<0){t.currentNode.style.setProperty('outline','1px dotted red','important');console.log(t.currentNode);}};}(document));

Answer 4

将其添加到您的 CSS 文件中：

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

确保在使用红色边框进行调试时一切都可见。

Answer 5

我使用 jQuery 的快速解决方案， stijn de ryck 的

createXPathFromElement

和控制台：

/**
 * Show information about overflowing elements in the browser console.
 *
 * @author Nabil Kadimi
 */
var overflowing = [];
jQuery(':not(script)').filter(function() {
    return jQuery(this).width() > jQuery(window).width();
}).each(function(){
    overflowing.push({
        'xpath'    : createXPathFromElement(jQuery(this).get(0)),
        'width'    : jQuery(this).width(),
        'overflow' : jQuery(this).width() - jQuery(window).width()
    });
});
console.table(overflowing);


/**
  * Gets the Xpath of an HTML node
  *
  * @link https://stackoverflow.com/a/5178132/358906
  */
function createXPathFromElement(e){for(var t=document.getElementsByTagName("*"),a=[];e&&1==e.nodeType;e=e.parentNode)if(e.hasAttribute("id")){for(var s=0,l=0;l<t.length&&(t[l].hasAttribute("id")&&t[l].id==e.id&&s++,!(s>1));l++);if(1==s)return a.unshift('id("'+e.getAttribute("id")+'")'),a.join("/");a.unshift(e.localName.toLowerCase()+'[@id="'+e.getAttribute("id")+'"]')}else if(e.hasAttribute("class"))a.unshift(e.localName.toLowerCase()+'[@class="'+e.getAttribute("class")+'"]');else{for(i=1,sib=e.previousSibling;sib;sib=sib.previousSibling)sib.localName==e.localName&&i++;a.unshift(e.localName.toLowerCase()+"["+i+"]")}return a.length?"/"+a.join("/"):null}

//**/

Answer 6

给所有东西添加边框让我的问题消失了。罪魁祸首是一个用

opacity: 0

隐藏的下拉菜单。 我实际上是通过排除法找到的 - 从父元素开始并沿着树向下移动，一一删除 DevTools 中的元素。

这对我来说就可以了：

* {
  opacity: 1 !important;
  visibility: visible !important;
}

Answer 7

实际上对我有用的是逐一删除元素。我在这里尝试了一些脚本/CSS，但它们不起作用。

您可以轻松地手动进行一种非常高效的树搜索：从 body 标签的子级开始，将它们一一删除，直到问题得到解决。一旦你找到了罪魁祸首，你就可以恢复它（重新加载页面）并一一删除它的子项，直到找到其中哪一个有问题。与其孩子和他们的孩子重复，依此类推。

Answer 8

添加您的 chrome 代码片段 >>> 通过检查 > 来源 > 代码片段 > 新代码片段 > 添加 代码

$("*").css("border","2px solid #f00")

>>点击

ctrl+enter

罪魁祸首出现了

另外，它会保存在浏览器中，方便以后使用

Answer 9

style="white-space:pre-wrap; word-break:break-word"

Answer 10

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

Answer 11

尝试使用 Chrome DevTools（元素检查器）从 DOM 中一一删除元素。并确定哪个元素的移除使得水平滚动消失。

Answer 12

我有一个带有

width: 100%

和填充的元素。设置

box-sizing: border-box

为我修复了水平滚动，因为除了 100% 宽度之外还应用了填充。

即。在设置 box-sizing 属性之前，宽度为（100% + 填充）。

w3-schools 解释了盒子大小属性：

box-sizing 属性允许我们将内边距和边框包含在元素的总宽度和高度中。如果设置 box-sizing: border-box;在元素上，内边距和边框包含在宽度和高度中

Answer 13

前往检查员处检查蓝色方块，然后按您看到的 什么是溢出

• { 轮廓：1px 实心 #f00 ！重要； }

Answer 14

在大多数情况下，你不能依赖“检查边界”，因为单个元素可能会导致其他元素也增长。就我而言，这直接误导了，因为边界完全在视口内。
最可靠的方法是删除一个元素，然后检查内容是否仍然溢出；所以我写了一个片段来做到这一点没有依赖性。

(() => {
let allElements = document.body.querySelectorAll('*');
let elements = [];

// Get leaf nodes
allElements.forEach(element => {
    const descendants = element.querySelectorAll('*');
    if (descendants.length === 0) {
        elements.push(element);
    }
});

// Travel the dom tree upwards
while (elements.length > 0) {
    let el = elements.splice(0, 1)[0];
    // Hide current element
    el.style.display = "none";
    // Check if it solved the overflow
    if (document.body.clientWidth >= document.body.scrollWidth) {
        console.log("Found element causing overflow:", el)
        // Mark with red border
        el.style.border = "1px solid red"
        el.style.display = "";
        return
    }
    el.style.display = "";
    // Add its parent and continue
    if (el.parentElement !== document.body) elements.push(el.parentElement)
}})()

Answer 15

就我而言，

display: flex

使得找到导致溢出的元素变得有点困难。 例如

<div display:flex;  flex-direction: row; >
<div>11...... </div>
<div>22...... </div>
<div>33...... </div>
</div>

flex布局使得11、22、33的高度，拉伸到相同。此外，还有一个 https://drafts.csswg.org/css-flexbox/#min-size-auto 可以创建自动最小尺寸限制。