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;

.hide-scrollbar::-webkit-scrollbar{
background-color: white;
border-radius: 10px;
width: 20px;
}

.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;