Custom Scrollbar with Vanilla JavaScript – vanillaScroll

Preview:

Description:

vanillaScroll is a small vanilla JavaScript plugin which turns a block element into a scrollable area with a custom scrollbar.

Basic usage:

Download and include the vanillaScroll.js on the html page.

<script src="vanillaScroll.js"></script>

Apply the custom scrollbar into a specified container.

var element = document.getElementById('myElement'),
  options = {
    // options here
  };
myScroller = new vanillaScroll(element, options);

Override the default styles for the scrollbar.

.slick-wrapper { position: relative; }
.slick-rail {
  background-color: transparent;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.slick-bar {
  background-color: #999;
  height: 100px;
  position: absolute;
  right: 0;
  cursor: pointer;
  width: 100%;
}
.slick-rail.enabled { background-color: #ddd; }
.slick-wrapper.hover > .slick-rail {
  opacity: 0;
  transition: opacity 250ms ease 1000ms;
}
.slick-wrapper.hover:hover > .slick-rail {
  opacity: 1;
  transition: opacity 250ms;
}

Available options.

options = {
  width: "auto",
  height: "100%",
  size: 15,
  scrollAmount: 10, // the amount to scroll the content with the mouse wheel
  scrollRate: 20,
  rail: false,
  alwaysShow: false, // false = show on hover
  position: "right"
};