OverlayScrollbars – Custom styleable Scrollbars with JavaScript


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


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>
        <meta charset="utf-8" />

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


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

The class name which shall be added to the host element.
The resize behavior of the host element. This option works exactly like the CSS3 resize property.
Indicates whether the host element is capable of “auto” sizes such as: width: auto and height: auto.
Indicates whether the content shall be clipped always.
Indicates whether RTL scrolling shall be normalized.
Indicates whether the padding for the content shall be absolute.
Indicates whether the plugin instance shall be updated continuously within a update loop.
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.
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.
The overflow behavior for the x (horizontal) axis.
The overflow behavior for the y (vertical) axis.
The basic visibility of the scrollbars.
The possibility to hide visible scrollbars automatically after a certain action.
The delay in milliseconds before the scrollbars gets hidden automatically.
Defines whether the scrollbar-handle supports drag scrolling.
Defines whether the scrollbar-track supports click scrolling.
Indicates whether the scrollbar reacts to touch events.
Indiactes whether the textarea width will be dynamic (content dependent).
Indiactes whether the textarea height will be dynamic (content dependent).
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