Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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");         }     }); 
like image 950
Adam Avatar asked Jul 16 '15 15:07

Adam


People also ask

How do I find out what is causing horizontal scroll?

To find out which elements cause a horizontal scrollbar, you can use the devtools to delete elements one by one until the scrollbar disappears. When that happens, press ctrl/cmd Z to undo the delete, and drill down into the element to figure out which of the child elements cause the horizontal scrollbar.

How do I get rid of the horizontal scroll bar in Chrome?

Navigate to the Google Chrome Web Store (See Resources). Type "Remove Scrollbars" (without quotes) in the search box and press "Enter." Click the "Remove Scrollbars" option located on top of the search results. Click the "Add To Chrome" button, and then click the "Add" button in the confirmation box.

How do I fix the scrollbar on Chrome?

Open a Chrome window. In the address bar, enter "chrome://flags," and navigate to that page. Scroll down to Overlay Scrollbars, and set the field to "Disabled." Restart your browser window, and your scrollbars should work again in PicMonkey.

How do I know which element is scrolling?

Hit F12 to open it and check the dom elements. You'll be able to find it.


1 Answers

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

"fastestest" way: added this in inspector:

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

and the culprit appeared

like image 94
Luca Avatar answered Sep 23 '22 04:09

Luca