Lightweight Customizable Scrollbar Library – Optiscroll

Category: Recommended | June 21, 2016
Author: wilsonfletcher
Views Total: 1,305
Official Page: Go to website
Last Update: June 21, 2016
License: MIT


Lightweight Customizable Scrollbar Library – Optiscroll


Optiscroll is a lightweight, highly customizable JavaScript library used to create custom horizontal and/or vertical scrollbars while preserving the native scroll behaviors.

More features:

  • Custom events.
  • Smooth scrollTo and scrollIntoView animations.
  • Supports both browser and scrollable area.

Basic usage:

Link to the Optiscroll’s JavaScript and Stylesheet files as this:

<link rel="stylesheet" href="dist/optiscroll.css">
<script src="dist/scrollbar.js"></script>

Wrap the content into a scrollable container with the CSS class of ‘optiscroll’.

<div id="demo" class="optiscroll">

Append a custom scrollbar to the scrollable area.

var myScrollbar = new Optiscroll(document.getElementById('demo'));

Default customization options.

var myScrollbar = new Optiscroll(document.getElementById('demo'), {

    // Prevents scrolling parent container (or body) when scroll reach top or bottom. 
    // Works also on iOS preventing the page bounce.
    preventParentScroll: false,

    // Use custom scrollbars also on iOS, Android and OSX (w/ trackpad)
    forceScrollbars: false,

    // Time before presuming that the scroll is ended, then fire scrollstop event
    scrollStopDelay: 300,

    // Maximum size (width or height) of the track.
    maxTrackSize: 95,

    // Minimum size (width or height) of the track.
    minTrackSize: 5,

    // Allow track dragging to scroll
    draggableTracks: true,

    // Scrollbars will be automatically updated on size or content changes
    autoUpdate: true,

    //  Custom class prefix for optiscroll elements
    classPrefix: 'optiscroll-',

The method to scroll the content  to a specific point within the scollable area.

// destX: number (px), left, right, false
// destY: number (px), top, bottom, false
// duration: number (ms), auto
myScrollbar.scrollTo(destX, destY, duration);

The method to scroll the content into view.

// element: DOM node, jQuery element, string (selector)
// duration: number (ms), auto
// delta: number (px), object with top, left, right, bottom numbers
myScrollbar.scrollIntoView (elem, duration, delta);

Custom events.

  • sizechange: changes clientWidth/clientHeight of the optiscroll element, or changes scrollWidth/scrollHeight of the scroll area
  • scrollstart: the user starts scrolling
  • scroll: the user scrolls. This event is already throttled, fired accordingly with the scrollMinUpdateInterval value.
  • scrollstop: the user stops scrolling. The wait time before firing this event is defined by the scrollStopDelay option
  • scrollreachedge: the user scrolls to any edge (top/left/right/bottom)
  • scrollreachtop: the user scrolls to top
  • scrollreachbottom: the user scrolls to bottom
  • scrollreachleft: the user scrolls to left
  • scrollreachright: the user scrolls to right