Custom scrollbar like a default one on MacOS

Question

I've been using macbook for a while and noticed that it "hides" scrollbar by default and scrollbar is shown when page is scrolled. How could I get that behaviour while using custom scrollbar using -webkit- css properties? When I just set them it's shown always regardless of whether page is being scrolled or not (like on Windows machine).

Answer 1

Perhaps you could try to set the overflow on your body and html to overflow: hidden and do the following in js.

window.addEventListener('scroll',function(){
   document.body.style.overflowY = 'scroll';
   document.getElementsByTagName('html')[0].overflowY = 'scroll';
});

The only thing you would have to do after is something like this article here. Hope this helped.