
The jQuery OverlayScrollbars plugin provides a simple way to create customizable, themeable overlay scrollbars on any scrollable element while preserving the native scroll functionality.
Features:
- Touch-enabled.
- RTL supported.
- CSS3 animated.
- Cross browser.
- High performance.
Basic usage:
1. Include the main stylesheet and a theme CSS of your choice on the head section of the webpage.
<!-- Main --> <link href="css/OverlayScrollbars.css" rel="stylesheet"> <!-- round dark --> <link href="css/os-theme-round-dark.css" rel="stylesheet"> <!-- round light --> <link href="css/os-theme-round-light.css" rel="stylesheet"> <!-- block dark --> <link href="css/os-theme-block-dark.css" rel="stylesheet"> <!-- block light --> <link href="css/os-theme-block-light.css" rel="stylesheet"> <!-- minimal dark --> <link href="css/os-theme-minimal-dark.css" rel="stylesheet"> <!-- minimal light --> <link href="css/os-theme-minimal-light.css" rel="stylesheet"> <!-- thick dark --> <link href="css/os-theme-thick-dark.css" rel="stylesheet"> <!-- thick light --> <link href="css/os-theme-thick-light.css" rel="stylesheet"> <!-- thin dark --> <link href="css/os-theme-thin-dark.css" rel="stylesheet"> <!-- thin light --> <link href="css/os-theme-thin-light.css" rel="stylesheet">
2. Include both jQuery JavaScript library and the jquery.overlayScrollbars.js
script on the page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="js/jquery.overlayScrollbars.js"></script>
3. Call the function on the target scrollable element and specify the theme Class you want to use. Available themes:
- os-theme-dark: built-in
- os-theme-light: built-in
- os-theme-minimal-dark
- os-theme-minimal-light
- os-theme-thin-dark
- os-theme-thin-light
- os-theme-thick-dark
- os-theme-thick-light
- os-theme-round-dark
- os-theme-round-light
- os-theme-block-dark
- os-theme-block-light
$('body').overlayScrollbars({ className: "os-theme-dark" });
4. More configuration options to customize the scrollbars.
$('body').overlayScrollbars({ // none || both || horizontal || vertical || n || b || h || v resize : 'none', // true || false sizeAutoCapable : true, // true || false clipAlways : true, // true || false normalizeRTL : true, // true || false paddingAbsolute : false, // true || false || null autoUpdate : null, // number autoUpdateInterval : 33, // These options are only respected if the native scrollbars are overlaid. nativeScrollbarsOverlaid : { showNativeScrollbars : false, //true || false initialize : true //true || false }, // Defines how the overflow should be handled for each axis overflowBehavior : { // visible-hidden || visible-scroll || hidden || scroll || v-h || v-s || h || s x : 'scroll', // visible-hidden || visible-scroll || hidden || scroll || v-h || v-s || h || s y : 'scroll' }, // Defines the behavior of the custom scrollbars. scrollbars : { visibility : 'auto', //visible || hidden || auto || v || h || a autoHide : 'never', //never || scroll || leave || n || s || l autoHideDelay : 800, //number dragScrolling : true, //true || false clickScrolling : false, //true || false touchSupport : true //true || false }, // Defines special behavior of textarea elements. textarea : { dynWidth : false, //true || false dynHeight : false //true || false } });
5. Callback functions.
$('body').overlayScrollbars({ callbacks : { onInitialized : null, //null || function onInitializationWithdrawn : null, //null || function onDestroyed : null, //null || function onScrollStart : null, //null || function onScroll : null, //null || function onScrollStop: null, //null || function onOverflowChanged : null, //null || function onOverflowAmountChanged : null, //null || function onDirectionChanged : null, //null || function onContentSizeChanged : null, //null || function onHostSizeChanged : null, //null || function onUpdated : null //null || function } });
6. API methods.
var instance = $('body').overlayScrollbars({ // options here }); // adds new options instance.options(optionName, optionValue) // updates scrollbars instance.update([force]) // puts the instance to sleep instance.sleep() // returns the current scroll information. instance.scroll() // sets the scroll position. instance.scroll(coordinates [, duration] [, easing] [, complete]) // stops the current scroll-animation. instance.scrollStop() // returns all relevant elements. instance.getElements() // returns a object which describes the current state of this instance. instance.getState() // removes scrollbars from DOM instance.destroy()
This awesome jQuery plugin is developed by KingSora. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 02.01.2018
- Source