Clever Geek Handbook

"overflow: hidden" on "body" creates a buggy scrollbar with a USB mouse

I am creating a web app and testing with Google Chrome. I have a sidebar item where if I hover over that item I want to disable scrolling for the item body

.

I achieved this by setting overflow: hidden

in a tag body

using CSS whenever the user hovers over the sidebar. I tested this in a browser without connecting a USB mouse and it worked fine:

Sidebar closed ( body

visible scrollbar)

enter image description here

Sidebar Open - Bad ( body

scrollbar still visible, creating an ugly overlap)

enter image description here

Sidebar open - good (my fix: hide body

the scrollbar so that the sidebar scrollbar is shown separately)

enter image description here

This works because Google Chrome does not display scrollbars as actual items (having a width). However, when I plug in a USB mouse, the scrollbars are now wide. And thus, when I move my mouse from outside the scrollbar to the inside of the scrollbar, the width suddenly changes:

Before hover ( body

visible scroll bar)

enter image description here

After Hover - Bad ( body

hidden scrollbar, suddenly reducing the width of the entire sidebar)

enter image description here

This creates a really ugly and glitchy visual effect where the width of the elements changes when you hover over them. I've looked everywhere for a solution for this ... any help would be greatly appreciated! Many thanks!

+3


source to share


4 answers


If you're on a mac, chances are your OS adds a scrollbar when you plug in your mouse, a scrollbar that will override most CSS selectors.

There is no way to override this with the CSS I am aware of. If you change your system settings, you will find that your site behaves as you intended.



System Settings → General → Show Scroll Bars → Change from [ALWAYS] to [WHEN TO VIEW]

show scrollbar settings

+3


source


Pointing width

to the body element will maintain a constant content width.



Here's a working example: https://jsfiddle.net/fuhacLtn/2/

+2


source


First, you should pay attention to rendering with other browsers and chrome windows. As you know, the scrollbar of windows is clearly not the same and does not appear the same. You may have surprises.

If not, you might want to check out the jQuery custom croller plugins .

This can help you control the scrolling a little more and overflow

and tweak the scrollbar depending on the render you would like to give it ..

Good luck '

+1


source 


.MY_CSS_CLASS::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}

This fixed my problem with the ugly scrollbar showing when the mouse was connected.

0


source






More articles:


All Articles