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"); } });
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.
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.
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.
Hit F12 to open it and check the dom elements. You'll be able to find it.
.slide-content .scroller { width: 1024px; }
"fastestest" way: added this in inspector:
* { outline: 1px solid #f00 !important; }
and the culprit appeared
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With