Lightweight Customizable Scrollbar Library – Optiscroll

Preview:

Description:

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.

Installation:

# NPM
$ 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">
  ...
</div>

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

Changelog:

08/20/2018

• v3.2.1: Fix incorrect setting check