Find Element That Is Causing the Showing of Horizontal Scrollbar in Google Chrome

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

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

"fastestest" way: added this in inspector:

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

and the culprit appeared

Which element is causing the horizontal scrollbar? Automated detection

In a narrower scope, you can use jQuery (to get the width) and node.scrollWidth to get nodes that have content that overflow their bounds.

http://jsfiddle.net/tomprogramming/v3Q6W/3/

What causes the horizontal scrollbar to appear on Chrome in the following most trivial HTML?

My guess is that Chrome has a problem with rounding.

If you use any value of px for the inputs width the scrollbar disappears.
Same when you change the inputs font-size to 100% (which equals exactly 13px in this example).

The current width of the input is 15 * 99% * 13px = 193.05px

I think the .05px let the scrollbar appear.

That also clarifies why the scrollbar disappears for widths of around 11em. It just rounds up in manner Chrome can handle better.

horizontal scrollbar in Firefox , but Chrome doesn’t show it. Anybody have any ideas how to remove that scroll from firefox?

This one solved my issue to hide vertical scroll bar from firefox

@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}

How to Know Which HTML Element is Causing Vertical Scroll Bar

Ok, I got that if I change from margin-top to padding-top for container to adjust for nav then problem is solved.
I reached to the solution after deleting elements in Firebug. So, quick fix problem is solved but my questions are still open.

How to know which element is causing scroll bar? Any trick?

Also, why margin-top is not working but padding-top has worked?

To make clear where I made change, I am adding the modified CSS:

   /* Adjust Nav */
    #wrap > .container {
        padding-top: 60px;

    }

Chrome: viewport 320 creates horizontal scrollbar and lets you scroll further down (responsive)

Solved it by getting rid of the limitation that the inner content has to be 320 (changed all div containers to 100% and the viewport to width=device-width).
The original bug seems to be a chrome bug.

---

Related Topics