Custom scrollbars for HTML elements

Sometimes your website may need inner scrolling for an element with overflowing content. In most cases using simple:

overflow: scroll;

is not enough to achieve the desired result (nice scrollbars for HTML element e.g. <div>).

Styling scrollbars for overflowing content is a nightmare using pure CSS techniques (if you want a decent browser support). The only reasonable solution seems to be a solid JS library. Fortunately, there is one available as a perfect-scrollbar Github project.

With this awesome library, all you need to do is just initialize it with a wrapper selector for your overflowing content.

$('.wrapper').perfectScrollbar();

.wrapper is an element which width or height is smaller than its content and it should have following styles applied (if you don't want to use default perfect-scrollbar css):

.wrapper {
overflow: hidden;
position: relative;
}

The examples provided in the docs should be just enough to get you started, so I won't rewrite them here.

A use case

Here is how it looks on one of my recent projects (real usage example). The website was a simple long page with one horizontally scrolled section which was expanded on mobile to one long column: