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

I think this depends on how the Browser handles scrollbars, and there is not much you can do about it. The only real crossbrowser solution would be to write your own scrollbars with JS. — Matthias Seifert, Aug 04 '17 at 08:25
Does this give you something you can use: https://stackoverflow.com/q/3296644/125981 — Mark Schultheiss, Aug 04 '17 at 08:38

score 4 · Answer 1 · edited Aug 04 '17 at 12:25

4

perfect-scrollbar is a

Minimalistic but perfect custom scrollbar plugin

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

edited Aug 04 '17 at 12:25

Cody Gray - on strike

239,200
50
490
574

answered Aug 04 '17 at 08:25

黄海洋

49
2

1

Nice but I would like to find something without have to use js – Martin Choraine Aug 04 '17 at 08:41

score 4 · Answer 2 · answered Aug 04 '17 at 08:43

4

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

.my-elem {
  overflow: hidden
} 

.my-elem:hover {
  overflow: auto
}

answered Aug 04 '17 at 08:43

Martin Choraine

2,296
3
20
37

1

Interesting! I assume you've tested this sollution across a few browsers - so, in your experience, is scroll position of div maintained on `onmouseleave` generally? – Petr Cibulka Feb 07 '19 at 16:31
didn't work for me. Hovering doesn't change the overflow property basically. Tried it on chrome on windows. – T. Dayya Oct 03 '19 at 21:49

score 1 · Answer 3 · answered Aug 04 '17 at 08:44

<style type="text/css">
body {
    overflow:hidden;
}
</style>

The code above hides both horizontal and vertical scrollbar.

Since every browser has its own default ‘user agent’ stylesheet, you may have to do a CSS Reset that resets the styling of all HTML elements to a consistent baseline. Then your HTML will appear the same on all browsers.

You can also Normalize. Normalize.css preserves useful defaults rather than "unstyling" everything.

How auto hide scrollbar on windows browser

3 Answers3