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

When I size my Chrome window to 328 x 455 pixels I still see a horizontal scrollbar. How can I find out which element is causing this? I've been looking at elements via the developer console, but can't find the element.

I then tried the script I found here, but nothing is logged. I tried it on element body, section1 and a bunch of others but don't know what else to do.

    $(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");
}
});
63617 次浏览
小开
最佳答案 
.slide-content .scroller {
width: 1024px;
}

“最快的”方法: 检查员补充说:

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

然后罪犯出现了

小开

一个 好文章的克里斯 Coyier 解释了你需要知道的关于这个问题的一切。

after reading this article, I used this code in my console to find the element responsible for vertical scrolling:

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

Update:
如果 上面的代码不起作用，它可能是 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';
}
}
}
小开

Overflowing elements

我的 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}


//**/
小开

通过复制粘贴下面的 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));
小开

为所有东西添加边框使问题对我来说消失了。罪魁祸首是一个隐藏在 opacity: 0中的下拉菜单。 实际上，我是通过在 DevTools 中逐个消除-删除元素的过程找到它的，从父元素开始，然后沿着树向下移动。

这对我来说已经足够了:

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

把这个添加到你的 css 文件:

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

It's making sure everything is visible while debugging with the red border.

小开

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

and the culprit appeared

此外，它将被保存在浏览器上，以后很容易使用

小开

Style = “ white-space: pre-rap; word-break: break-word”

小开

Actually what worked for me is deleting elements one by one. I tried some of the scripts / css here and they didn't work.

您可以很容易地手动进行一种非常有效的树搜索: 从 body 标记的子元素开始，逐个删除它们，直到问题得到解决。一旦找到了罪魁祸首，就可以恢复它(重新加载页面)并逐个删除它的子节点，直到找到哪个节点有错为止。对它的孩子和他们的孩子重复，以此类推。

小开

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


提交答案