How auto hide scrollbar on windows browser

Question

I have several elements with overflow: auto. It works nice. On macOS, scrollbars are automatically hidden when the user is not scrolling and appear on scroll.

On windows and on any browsers scrollbars are always visible. It makes an ugly rendering.

So how can I auto hide scrollbars on every OS and every browser when the user is not scrolling?

I know there is a lot of similar question but I haven't found a suitable answer

Answer 1

I found something ! I've never thought it could be so simple :

.my-elem {
  overflow: hidden
} 

.my-elem:hover {
  overflow: auto
}

Answer 2

perfect-scrollbar is a

Minimalistic but perfect custom scrollbar plugin

It works with almost every web browser, including Internet Explorer.