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

Answer 1

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

"fastestest" way: added this in inspector:

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

and the culprit appeared

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

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

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.

Answer 5

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 6

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 7

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

You can easily do a kind of tree search by hand that is quite efficient: Start at the children of the body tag, delete them one by one until the problem is fixed. Once you have the culprit, you restore it (reload page) and delete its children one by one until you find which of them is at fault. Repeat with its children and their children and so on.

Answer 8

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

Answer 9

style="white-space:pre-wrap; word-break:break-word"

Answer 10

in Nextjs, adding overflow-x:hidden to *{} in global.css solves the issue.

Answer 11

Try deleting elements from the DOM one by one using Chrome DevTools (Elements inspector). And determine which element's removal makes the horizontal scroll disappear.

Answer 12

I had an element with width: 100% with padding. Setting box-sizing: border-box fixed the horizontal scroll for me, because the padding was being applied in addition to 100% width.

ie. the width was (100% + padding) prior to setting the box-sizing property.

w3-schools explains box-sizing property:

The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height

Answer 13

Go to the inspector and chechk the blue squares and press wich you see with what is doing the overflow

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

Answer 14

In most cases you can't rely on "inspection borders", since a single element can cause others to also grow. In my case it was straight up misleading, since the border was completly within the viewport.
The most reliable method is to remove an element, then check if the content is still overflowing; so I wrote a snippet to do just that without dependencies.

(() => {
let allElements = document.body.querySelectorAll('*');
let elements = [];

// Get leaf nodes
allElements.forEach(element => {
    const descendants = element.querySelectorAll('*');
    if (descendants.length === 0) {
        elements.push(element);
    }
});

// Travel the dom tree upwards
while (elements.length > 0) {
    let el = elements.splice(0, 1)[0];
    // Hide current element
    el.style.display = "none";
    // Check if it solved the overflow
    if (document.body.clientWidth >= document.body.scrollWidth) {
        console.log("Found element causing overflow:", el)
        // Mark with red border
        el.style.border = "1px solid red"
        el.style.display = "";
        return
    }
    el.style.display = "";
    // Add its parent and continue
    if (el.parentElement !== document.body) elements.push(el.parentElement)
}})()