How to hide scrollbar in Chromium when static , but show when scrolling?

Question

Is it possible to hide the scrollbar when static, but show when scrolling?

I tried the following css based on this post, but the scrollbar doesn't show up during scrolling.

::-webkit-scrollbar { 
  display: none; 
}

There is another post achieving similar feature on Firefox, but not Chromium.

It would be best if this feature can be achieved by css.

You can't add an "onscroll" listener in pure CSS like in JS, and there aren't any scroll-pseudoclasses like `:hover` so you'll have to use JS. — Al.G., Feb 07 '17 at 23:42

Al.G. · Accepted Answer · 2017-02-07T23:55:42.473

Set up a timer to show the scrollbar, and on scroll event reset the timer and show the scrollbar:

var el = document.body; // you can use the following code on any element
var showScrollbarTimeout = 0; // track the timeout function so that we can reset it later

function hideScroll () { el.style.overflow = "hidden"; }
function showScroll () { el.style.overflow = "visible"; }

function hideLater () { showScrollbarTimeout = setTimeout(hideScroll, 1000); }

hideLater();

el.onscroll = function () {
    clearTimeout(showScrollbarTimeout);
    showScroll();
    hideLater();
}

How to hide scrollbar in Chromium when static , but show when scrolling?

1 Answers1