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

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


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



  // handles scrollbars after resizing screen
  resize() {
    if ($("html").hasClass("touchevents") && $(window).width() < 540) {
      // disable for small mobile screens

    if (this.$element.hasClass("ps-container")) {
      // is already initialized
    } else {
      // initialize

  // initialize scrollbars
  init() {
      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).