Author: | idiotWu |
---|---|
Views Total: | 1,379 views |
Official Page: | Go to website |
Last Update: | June 5, 2023 |
License: | MIT |
Preview:

Description:
smooth-scrollbar is a JavaScript library used to create a customizable, performant scrollbar with smooth scrolling effects for scrollable content.
Installation & Download:
# NPM $ npm install smooth-scrollbar --save
How to use it:
Load the required ‘smooth-scrollbar.css’ and ‘smooth-scrollbar.js’ in the html page.
<link href="dist/smooth-scrollbar.css" rel="stylesheet"> <script src="dist/smooth-scrollbar.js"></script>
Create a scrollable area as follows:
<section scrollbar> Scrollable content goes here </section> <!-- Or --> <section data-scrollbar> Scrollable content goes here </section> <!-- Or --> <scrollbar> Scrollable content goes here </scrollbar>
Make it scrollable when the inner content is larger than its parent container.
section { width: 500px; height: 300px; overflow: auto; }
Append a custom scrollbar to the scrollable area.
Scrollbar.initAll();
Possible options with default values.
Scrollbar.initAll({ // Momentum reduction damping factor, a float value between (0, 1) damping: .1 // Minimal size for scrollbar thumb. thumbMinSize: 20, // Render scrolling by integer pixels renderByPixels: true, // Whether allow upper scrollable content to continue scrolling when current scrollbar reaches edge. // When set to 'auto', it will be enabled on nested scrollbars, and disabled on first-class scrollbars. continuousScrolling: 'auto', // Keep scrollbar tracks always visible. alwaysShowTracks: false, // Delegate wheel events and touch events to the given element. // By default, the container element is used. // This option will be useful for dealing with fixed elements. delegateTo: null, // plugins plugins: {} });
API methods.
// Init scrollbar on given element, and returns scrollbar instance Scrollbar.init( element, [options] ) // Automatically init scrollbar on all elements refer to selector scrollbar, [scrollbar], [data-scrollbar], returns an array of scrollbars collection: Scrollbar.initAll( [options] ) // Check if scrollbar exists on given element: Scrollbar.has( element ) // Get scrollbar on the given element, if no scrollbar instance exsits, return undefined: Scrollbar.get( element ) // Return an array that contains all scrollbar instances: Scrollbar.getAll() // Remove scrollbar on the given element, same as scrollbar#destroy() method. Scrollbar.destroy( element ) // Remove all scrollbar instances. Scrollbar.destroyAll() // Attaches plugins to scrollbars. Scrollbar.use() // Attaches default style sheets to current document. Scrollbar.attachStyle() // Removes default styles from current document. Scrollbar.detachStyle()
Changelog:
v8.8.4 (06/06/2023)
- utils/debounce: fix timer scheduling
v8.8.3 (04/24/2023)
- refactor(lodash): simplify clamp and debounce