Lightweight Customizable Scrollbar Library – Optiscroll

Category: Javascript , Recommended | August 20, 2018
Views Total:1,826 views
Official Page:Go to website
Last Update:August 20, 2018


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.


$ npm install optiscroll --save

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-',
    // Optiscroll will generate an element to wrap your content. If not, the first child will be used
    wrapContent: true,
    // Optiscroll will automatically detect if the content is rtl, however you can force it if the detection fails
    rtl: false 

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



  • v3.2.1: Fix incorrect setting check

You Might Be Interested In:

Leave a Reply