Find element that is causing the showing of horizontal scrollbar in Google Chrome
CssScrollbarOverflowCss Problem Overview
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");
}
});
Css Solutions
Solution 1 - Css
.slide-content .scroller {
width: 1024px;
}
"fastestest" way: added this in inspector:
* {
outline: 1px solid #f00 !important;
}
and the culprit appeared
Solution 2 - Css
An excellent article by Chris Coyier explains everything you need to know about this problem.
after reading this article, I used this code in my console to find the element responsible for vertical scrolling:
press F12
in your Browser then choose console
and paste the below code there and press 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]);
all[i].style.borderTop = '1px solid red';
}
}
Update:
if the above code didn't work it might be an element inside an iframe that make the page to vertically scroll.
in this case you can search within the iframes
using this code:
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';
}
}
}
Solution 3 - Css
Find the culprit by copy paste the below js code in your URL address bar.
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));
Solution 4 - Css
My quick solution with jQuery,
stijn de ryck's createXPathFromElement
and the console:
/**
* 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}
//**/
Solution 5 - Css
Add this to your css file:
* {
outline: 1px solid #f00 !important;
opacity: 1 !important;
visibility: visible !important;
}
It's making sure everything is visible while debugging with the red border.
Solution 6 - Css
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 the DevTools one by one, starting with parent elements and moving down the tree.
This would have done it for me:
* {
opacity: 1 !important;
visibility: visible !important;
}
Solution 7 - Css
add your chrome snippets >>> by inspect > sources > snippets > new snippet > add
code $("*").css("border","2px solid #f00")
>> click ctrl+enter
and the culprit appeared
> In addition, it will be saved on the browser and used easily afterward
Solution 8 - Css
style="white-space:pre-wrap; word-break:break-word"