CODEWITHSUNDEEP
javascriptcss
Karthik Iyengar
Karthik Iyengar

Reputation: 594

Autohide Scrollbars - Show only when necessary

I would like to know how to achieve a autohiding scrollbar - meaning that the scrollbar would be only visible when actively scrolling. Similar the scrollbar used on most sites (including Stackoverflow) and Android.

I was only able to achieve this myself by creating a fixed element which is positioned on top of the scrollbar and using Javascript to listen to the scroll event and then adjust its opacity. Although this works, I believe a simpler, pure CSS solution to this is possible.

I've tried to figure this out myself, but inspecting the scrollbar styles is painful and I've not made much progress. Is this behaviour OS specific?

The property I am looking for would be similar to this in functionality, but needless to mention work across browsers: https://msdn.microsoft.com/en-in/library/windows/apps/hh441298.aspx

-ms-overflow-style: -ms-autohiding-scrollbar

Thanks in advance for the response.

Upvotes: 2

Views: 2523

Answers (1)

Karthik Iyengar
Karthik Iyengar

Reputation: 594

To answer my own question:

There were some custom styles on the page which were causing an issue for me. The following property will tell the browser to use a custom scrollbar causing WebKit to turn off its built-in scrollbar.

::-webkit-scrollbar {
    width: 40px;
}

The property ::-webkit-scrollbar-thumb will allow you to style the scroller, although I believe there is no psuedo class which will allow you to make it disappear when the page is not scrolling. This leads me to believe that you cannot have custom scrollbars in webkit that can autohide (unless we use the JS based approach)

Upvotes: 3

Related Questions