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

Posted 2023-02-21

【中文标题】查找导致在 Google Chrome 中显示水平滚动条的元素

【英文标题】：Find element that is causing the showing of horizontal scrollbar in Google Chrome

【发布时间】：2015-10-06 03:37:21

【问题描述】：

当我将 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");
        
    );

【问题讨论】：

不是最好的方法，但可以快速解决：body overflow-x: hidden;

好的，tnx，我想这在视觉上解决了这个问题，但我不确定谷歌的“mobilegeddon”会喜欢这种解决问题的方式。所以我仍在寻找元素并正面解决问题。

我曾经遇到过同样的问题，然后像这样解决它：我删除让我们说

【参考方案1】：

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

更新：如果上述代码不起作用，可能是 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';
       
   

【参考方案2】：

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

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

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

【参考方案3】：

.slide-content .scroller 
  width: 1024px;

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

* 
  outline: 1px solid #f00 !important;

罪魁祸首出现了

【讨论】：

红色边框非常有用。我很快发现input[type="file"] 的字体很大，导致屏幕比我想要的要宽。谢谢。

这再次帮助了我，我发现 Stripe 表单的一些 input 字段是罪魁祸首，但我不得不使用 border: 1px solid red!important;。我建议在您的答案中添加!important。

注意这种方式，边框实际上可以改变滚动条出现的位置，因为它本身就有宽度。

在 op 的情况下，1px 并没有什么不同，但如果这是一个问题，总是可以添加一个 border-top only

不错的把戏。我用outline 替换了border。以这种方式找到罪魁祸首要清楚得多（轮廓不会使框变大，它只是在“上方”画线）

【参考方案4】：

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

这对我来说已经完成了：

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

【参考方案5】：

将下面的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));

【讨论】：

哇，这太棒了。为所有内容添加边框的公认答案对我没有帮助，当我这样做时滚动条消失了。

我喜欢这个解决方案，但是，你应该解释一下，它会标记左侧被切断的元素，通常（RTL 除外）不会导致滚动条。

如果由于某种原因无法将其粘贴到 URL 地址栏上，可以在浏览器控制台中复制粘贴以下内容 ``` (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

【参考方案6】：

我使用 jQuery、 stijn de ryck's 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://***.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")+'"]');elsefor(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

//**/

【讨论】：

请注意，如果您使用某种滑动动画（轮播等），它们也会出现在此列表中。