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

Question

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 de

Answer 1

.slide-content .scroller {
  width: 1024px;
}

"fastestest" way: added this in inspector:

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

and the culprit appeared

Answer 2

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

Answer 3

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

Answer 4

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}

//**/

Answer 5

There is an excellent article by Chris Coyier which explain everything you need about this problem.

after reading this article, I personally use this code in my console to find out which element cause vertical scroll:

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