CSS 查找导致在 Google Chrome 中显示水平滚动条的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31458477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find element that is causing the showing of horizontal scrollbar in Google Chrome
提问by Flo
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 elements via the developer console, but can't find the element.
当我将 Chrome 窗口的大小调整为 328 x 455 像素时，我仍然看到一个水平滚动条。我怎样才能找出导致这种情况的元素？我一直在通过开发者控制台查找元素，但找不到该元素。
I then tried the script I found here, but nothing is logged.
I tried it on element body, section1and a bunch of others but don't know what else to do.
然后我尝试了我在这里找到的脚本，但没有记录任何内容。我在 element和其他一些人上尝试过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");
}
});
回答by Luca
.slide-content .scroller {
width: 1024px;
}
"fastestest" way: added this in inspector:
“最快”方式：在检查器中添加：
* {
border: 1px solid #f00 !important;
}
and the culprit appeared
罪魁祸首出现了
回答by Mosijava
There is an excellent articleby Chris Coyier which explain everything you need about this problem.
Chris Coyier撰写了一篇出色的文章，其中解释了有关此问题的所有信息。
after reading this article, I personally use this code in my console to find out which element cause vertical scroll:
看完这篇文章后，我个人在我的控制台中使用这段代码来找出导致垂直滚动的元素：
press F12in your Browser then choose consoleand copy paste this code there and press enter
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]);
}
}
Update:
it might be an element inside an iframe make page to vertically scroll.
in this case you should check every suspected iframe with this code:
更新：
它可能是 iframe 中的一个元素，使页面垂直滚动。在这种情况下，您应该使用以下代码检查每个可疑的 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]);
}
}
回答by Nabil Kadimi
My quick solution with jQuery, stijn de ryck's createXPathFromElementand the console:
我使用jQuery、stijn de ryck'screateXPathFromElement和控制台的快速解决方案：
/**
* 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}
//**/
回答by Tamilselvan K
Find the culprit by copy paste the below js code in your URL address bar.
通过将以下 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));
回答by Huon Imberger
Adding a border to everything made the problem go away for me. The culprit was a drop-down menu hidden with opacity: 0.
I actually found it by process of elimination - delete elements in DevTools one by one, starting with parent elements and moving down the tree.
为所有内容添加边框使我的问题消失了。罪魁祸首是一个隐藏的下拉菜单opacity: 0。我实际上是通过消除过程找到的 - 一个一个删除 DevTools 中的元素，从父元素开始，然后沿着树向下移动。
But now I know the problem, this would have done it for me:
但现在我知道了这个问题，这对我来说已经完成了：
* {
opacity: 1 !important;
visibility: visibile; !important;
}
