"overflow: hidden" on "body" produces glitchy scrollbar with USB mouse

Question

I'm building a web application and testing with Google Chrome. I have a sidebar element where, if I hover over that element, I want to disable scrolling for the body element.

I achieved this by setting overflow: hidden on the body tag using CSS whenever a user hovers over the sidebar. I tested this on a browser without a USB mouse plugged in, and it worked great:

Sidebar Closed (body scrollbar visible)

Sidebar Open - Bad (body scrollbar still visible, producing an ugly overlap)

Sidebar Open - Good (my fix: hiding body scrollbar, so that sidebar scrollbar displays alone)

This works because Google Chrome doesn't render scrollbars as actual elements (that have widths). However, when I plug in my USB mouse, the scrollbars now do have widths. And thus, when I move my mouse from outside the scrollbar to inside the scrollbar, the width suddenly changes:

Before Hover (body scrollbar visible)

After Hover - Bad (body scrollbar hidden, suddenly decreasing the width of the whole sidebar)

This produces a really ugly and glitchy visual effect, where the widths of elements change when you hover over them. I've looked everywhere for a solution to this... any help would be much appreciated! Thanks so much!

Answer 1

If you are on a mac, chances are your OS is adding the scroll bar when you plug in the mouse, a scroll bar that will override most CSS selectors.

There is not a way to override this with CSS that I am aware of. If you change your system preferences you will find your website behaving the way you intended.

System Preferences -> General -> Show Scroll Bars -> Change from [ALWAYS] to [WHEN SCROLLING]