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

“fastestest”方式：在检查员中添加：

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

出现了罪魁祸首

Answer 2

Chris Coyier有一个excellent article解释了你对这个问题所需的一切。

阅读本文后，我个人在我的控制台中使用此代码来找出导致垂直滚动的元素：

在浏览器中按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]);
    }
}

<强>更新
它可能是iframe make页面中垂直滚动的元素。在这种情况下，您应该使用以下代码检查每个可疑的iframe：

var frame = document.getElementsByTagName("iframe"); 
frame = frame[0];
frame = (frame.contentWindow || frame.contentDocument);
var all = frame.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]);
    }
}

Answer 3

我使用 jQuery ， stijn de ryck's createXPathFromElement和控制台的快速解决方案：

{{1}}

Answer 4

通过复制查找下面的js代码到罪魁祸首。

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 5

它是容器的第一个孩子，在.main-footer里面。它有一个保证金：自动和保证金左：20％内联风格。删除它并简单地应用text-align：center，因为里面只有文本元素（input，span和a）。

那会做的。

见这里：http://i.stack.imgur.com/vqx0C.jpg

Answer 6

为所有内容添加边框使问题对我而言消失了。罪魁祸首是一个用opacity: 0隐藏的下拉菜单。我实际上是通过消除的过程找到它的-从父元素开始并向下移动树，逐个删除DevTools中的元素。

但是现在我知道了这个问题，这对我来说会做到的：

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

Answer 7

将此添加到您的 css 文件中：

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

它确保在使用红色边框进行调试时所有内容都可见。

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

7 个答案: