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.

Answer 1

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();
}