OverlayScrollbars – Custom styleable Scrollbars with JavaScript

OverlayScrollbars

Create custom and beautiful Scrollbars with OverlayScrollbars, a pure vanilla JavaScript library. It is really simple and powerful designed (with a really good documentation) and can be used without any dependencies (a separate jQuery edition is also available). It supports 8+, 6+ as well as all (really) modern browsers, which can use the recent technologied to speed up the efficiency and performance.

OverlayScrollbars can be used on any HTML Element, including textareas, as well as directly on the documents body. It supports, of course, also Mouse and Touch gestures and offers extremly powerful scroll methods, features and animations. The script comes also up with RTL (with normalization), many callbacks and an automatic update detection.

Download the latest version of OverlayScrollbars as .ZIP or as .TAR package!

npm i overlayscrollbars --save

yarn add overlayscrollbars --save

bower install overlayscrollbars --save

Instructions

The package itself contains the main JavaScript file as well as the main Stylesheet. A separated jQuery own edition is also available. All 3 three files are included as normal and as minified editions. The website itself also offers many fantastic and fancy themes!

 

Load OverlayScrollbars

It’s recommended to link the respective Stylesheet directly in the header of your HTML document. If you’re using one the available themes, include this as well, AFTER the first one. The JavaScript file should be embed directly after the opened <body> tag. Don’t forget to include the jQuery library BEFORE the OverlayScrollbars script, if you’re using the jQuery edition.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" src="/css/OverlayScrollbars.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/OverlayScrollbars.min.js"></script>
    </body>
</html>

 

Configure OverlayScrollbars

The script itself offers many settings and callbacks, to configure the behavior and hook into the single events. It’s really recommended to read the official documentation for more informations!

document.addEventListener("DOMContentLoaded", {
    OverlayScrollbars(document.body, {
        className:          "os-theme-dark",
        resize:             "none",
        sizeAutoCapable:    true,
        clipAlways:         true,
        normalizeRTL:       true,
        paddingAbsolute:    false,
        autoUpdate:         null,
        autoUpdateInterval: null,
        nativeScrollbarsOverlay: {
            showNativeScrollbars:   false,
            initialize:             true
        },
        overflowBehavior: {
            x:  "scroll",
            y:  "scroll"
        },
        scrollbars: {
            visibility:         "auto",
            autoHide:           "never",
            autoHideDisplay:    800,
            dragScrolling:      true,
            clickScrolling:     false,
            touchSupport:       true,
        },
        textarea: {
            dynWidth:   false,
            dynHeight:  false
        },
        callbacks: {
            onInitialized:          null,
            onInitializedWithdrawn: null,
            onDestroyed:            null,
            onScrollStart:          null,
            onScroll:               null,
            onScrollStop:           null,
            onOverflowChanged:      null,
            onOverflowAmountChanged: null,
            onDirectionChanged:     null,
            onContentSizeChanged:   null,
            onHostSizeChanged:      null,
            onUpdate:               null
        }
    });
});

 

Configure: Options

className
The class name which shall be added to the host element.
resize
The resize behavior of the host element. This option works exactly like the CSS3 resize property.
sizeAutoCapable
Indicates whether the host element is capable of “auto” sizes such as: width: auto and height: auto.
clipAway
Indicates whether the content shall be clipped always.
normalizeRTL
Indicates whether RTL scrolling shall be normalized.
paddingAbsolute
Indicates whether the padding for the content shall be absolute.
autoUpdate
Indicates whether the plugin instance shall be updated continuously within a update loop.
autoUpdateInterval
The interval in milliseconds in which a auto update shall be performed for this instance.
nativeScrollbarsOverlaid. showNativeScrollbars
Indicates whether the native overlaid scrollbars shall be visible.
nativeScrollbarsOverlaid.initialize
Indicates whether the plugin shall be initialized even if the native scrollbars are overlaid. If you initialize the plugin on the body element, I recommend to set this option to false.
overflowBehavior.x
The overflow behavior for the x (horizontal) axis.
overflowBehavior.y
The overflow behavior for the y (vertical) axis.
scrollbars.visibility
The basic visibility of the scrollbars.
scrollbars.autoHide
The possibility to hide visible scrollbars automatically after a certain action.
scrollbars.autoHideDelay
The delay in milliseconds before the scrollbars gets hidden automatically.
scrollbars.dragScrolling
Defines whether the scrollbar-handle supports drag scrolling.
scrollbars.clickScrolling
Defines whether the scrollbar-track supports click scrolling.
scrollbars.touchSupport
Indicates whether the scrollbar reacts to touch events.
textarea.dynWidth
Indiactes whether the textarea width will be dynamic (content dependent).
textarea,dynHeight
Indiactes whether the textarea height will be dynamic (content dependent).
callbacks.callback
This object contains 12 different callback “locations”, where you can hook your own functions. Please check out the README.md file for more informations.

Leave a Reply

Top