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

Question

当我将 Chrome window 调整为 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 的 excellent article 解释了您需要了解的有关此问题的所有信息。

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

在您的浏览器中按 F12 然后选择 console 并粘贴以下代码并按回车键：

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

更新：
if 上面的代码不起作用它可能是 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

我的快速解决方案 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 
  */
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 4

通过复制粘贴以下 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 5

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

这对我来说已经完成了：

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

Answer 6

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

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

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

Answer 7

添加您的 chrome 片段 >>> 通过检查 > 来源 > 片段 > 新片段 > 添加代码 $("*").css("border","2px solid #f00") >> 点击 ctrl+enter

罪魁祸首出现了

In addition, it will be saved on the browser and used easily afterward

Answer 8

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

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

Find element that is causing the showing of horizontal scrollbar in Google Chrome

css

overflow

scrollbar