How to always show an inline scroll bar on Mac

February 25, 2019

Inline scrolling, while being a bit finicky, is sometimes necessary. It can be great for blogs, news feeds, or any other content with a variable height. However, if there is a lot of content, things can get cut off due to a maximum container height. This results in elements sitting “below the fold”, or if things line up correctly it may not even be obvious that there is more content to scroll. This is especially an issue on Macs, which auto hide scroll bars unless you are scrolling them. This is a system-wide setting and cannot be overridden via CSS. Therefore, a solution is needed. Pseudo-elements to the rescue!

If you have scrolling content like this, here’s a quick fix.

On your parent container (in this case, we will call it .hide-scrollbar simply put these rules (to set up inline scrolling)

.hide-scrollbar{
overflow-y: scroll;
overflow-x: hidden;
}

Then, to set up your fake scrollbar, add these rules:

This will take care of the styling for the track of the scrollbar.
.hide-scrollbar::-webkit-scrollbar{
background-color: white;
border-radius: 10px;
width: 20px;
}
This will handle the thumb (scrolling part).
.hide-scrollbar::-webkit-scrollbar-thumb{
background-color: grey;
border-radius: 10px;
border: 5px solid white;
}
.hide-scrollbar::-webkit-scrollbar-thumb:vertical{
height: 20px!important;
width: 20px;

}

Pretty simple, but it works in Chrome, Firefox and Safari as of February 2019. Happy coding!

 

 

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive