Author: | wilsonfletcher |
---|---|
Views Total: | 1,774 views |
Official Page: | Go to website |
Last Update: | August 20, 2018 |
License: | MIT |
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