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

Solution 1

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

"fastestest" way: added this in inspector:

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

and the culprit appeared

Solution 2

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 makes the page scroll vertically.

in this scenario you can search through 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

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

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

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.

View more solutions

Comments

[Ryan]

The red border was super helpful. I quickly found that a input[type="file"] had a large font size and was causing the screen to be wider than I wanted. Thanks.

[Ryan]

This just helped me out again, and I discovered that some input fields for a Stripe form were the culprits, but I had to use border: 1px solid red!important;. I recommend adding !important to your answer.

[bersling]

pay attention with this approach, the border can actually change the places where scrollbars appear, since it has a width itself.

[Luca]

in the op case, 1px didn't make a difference, but if that is a concern, one can always add a border-top only

[William Randokun]

Wow this is amazing. The accepted answer with adding a border to everything didn't help me, the scrollbar disappeared when I did that.

[sudonitin]

Just a note, if you're using some sort of sliding animations(carousel, etc) they will appear in this list too.

[rekire]

I like that solution however, you should explain it and it marks elements which are cut off on the left which typically (except RTL) doesn't cause a scroll bar.

[Samyak Bhuta]

One can just copy paste the following in the browser console, if pasting it on URL address bar is not working for some reason ``` (function(d){var w=d.documentElement.offsetWidth,t=d.createTreeWalker(d.body,‌​NodeFilter.SHOW_ELEM‌​ENT),b;while(t.nextN‌​ode()){b=t.currentNo‌​de.getBoundingClient‌​Rect();if(b.right>w|‌​|b.left<0){t.current‌​Node.style.setProper‌​ty('outline','1px dotted red','important');console.log(t.currentNode);}};}(document))‌​; ```

[Mariusz Pawelski]

Nice trick. I replaced border with outline though. It was much clearer to find the culprit that way (outline doesn't make boxes larger, it just drew lines "over" it)

[Kaleba KB Keitshokile]

I spent hours trying to find the problem and I couldn't use overflow-x: hidden; because I have sticky elements. This helped me fix it in seconds!

[van]

Saving the day 7 years later, thanks!

[Michal]

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

[Moondog 2112]

This trick should be one of the first lessons of css and html

[ismaestro]

Also, if you want to test this issue, I''ve created a post about this with cypress: ismaelramos.dev/…