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:

import $ from 'jquery';  
require('perfect-scrollbar/jquery')($);

export default class HorizontalSection {  
  constructor() {
    this.ready = this.ready.bind(this);
    this.resize = this.resize.bind(this);

    $(document).ready(this.ready);
  }

  // initialize after document is ready
  ready() {
    this.$element = $('.Days-wrapper');

    $(window).resize(this.resize);

    this.resize();
  }

  // handles scrollbars after resizing screen
  resize() {
    if ( $('html').hasClass('touchevents') && $(window).width() < 540 ) {
      // disable for small mobile screens
      this.$element.perfectScrollbar('destroy');
      return;
    }

    if ( this.$element.hasClass('ps-container') ) {
      // is already initialized
      this.$element.perfectScrollbar('update');
    } else {
      // initialize
      this.init();
    }
  }

  // initialize scrollbars
  init() {
    this.$element.perfectScrollbar({
      suppressScrollY: true
    });
  }
}

As you may see for smaller screens where horizontal scrolling is not used I've disabled the perfect-scrollbar because it may prevent the user from scrolling vertically (in some edge cases).