{
    className            : "os-theme-dark",
    resize               : "none",
    sizeAutoCapable      : true,
    clipAlways           : true,
    normalizeRTL         : true,
    paddingAbsolute      : false,
    autoUpdate           : null,
    autoUpdateInterval   : 33, 
    updateOnLoad         : ["img"],
    nativeScrollbarsOverlaid : {
        showNativeScrollbars   : false,
        initialize             : true 
    },
    overflowBehavior : {
        x : "scroll",
        y : "scroll"
    },
    scrollbars : {
        visibility       : "auto",
        autoHide         : "never",
        autoHideDelay    : 800,
        dragScrolling    : true,
        clickScrolling   : false,
        touchSupport     : true,
        snapHandle       : false
    },
    textarea : {
        dynWidth       : false,
        dynHeight      : false,
        inheritedAttrs : ["style", "class"]
    },
    callbacks : {
        onInitialized               : null,
        onInitializationWithdrawn   : null,
        onDestroyed                 : null,
        onScrollStart               : null,
        onScroll                    : null,
        onScrollStop                : null,
        onOverflowChanged           : null,
        onOverflowAmountChanged     : null,
        onDirectionChanged          : null,
        onContentSizeChanged        : null,
        onHostSizeChanged           : null,
        onUpdated                   : null
    }
}

<!-- the host-element -->
<div class="foo bar os-host-textarea ..." style="background: red;">
    <!-- ... -->
    <textarea class="foo bar" style="background: red;"></textarea>
    <!-- ... -->
</div>

eventArgs : {
    x             : boolean,
    y             : boolean,
    xScrollable   : boolean,
    yScrollable   : boolean,
    clipped       : boolean
}

eventArgs : {
    x : number,
    y : number
}

eventArgs : {
    isRTL : boolean,
    dir   : string
}

eventArgs : {
    width  : number,
    height : number
}

eventArgs : {
    width  : number,
    height : number
}

eventArgs : {
    forced  : boolean
}

Basically the plugin can be initialized to any DOM element which can contain DOM elements and supports scrolling.
However, display : inline elements does not support scrolling at all. If you initialize the plugin to a inline element, the plugin will not work crrectly, and the element dimensions will be wrong aswell. After you changed the display property to something else, it will work correctly again.

The plugin was tested with the following display values: display : block;
display : inline-block; Since you can wrap any element which has one of those values, they should suit for every application.
The body element is not really special, because it supports all criteria, but there is a case which is different on this element.
Without the plugin initialized the scroll viewport of your whole content is the window. But after the initialization of the plugin, the body element itself becomes new scroll viewport of your whole content.

That means, if you want to specify a min-height or min-width for your content, you have to do it with this two selectors:

body.os-host > .os-padding > .os-viewport > .os-content,
body.os-host > .os-padding > .os-viewport > .os-content-arrange {
    min-width  : 800px;
    min-height : 600px;
}

Please use always both selectors and not just one.

You could also specify a min-height or min-width directly for the body element, but that wouldn't make any sense, since you want the body element to be always as big as the window, to simulate a correct viewport. Besides that, the plugin style overrides your body min size(s) to 0 if the plugin is applied to the body element. Textarea elements are special. Although they can't contain any DOM elements, the plugin has extended support for them.
Your textarea element will be wrapped inside a generated element, please read the DOM Elements section for more information.
After the plugin is applied to your textarea, the textarea is capable of dynamic height and dynamic width.
Dynamic height can be achieved if the option textarea.dynHeight is set to true, then the host-element must have the css property height: auto set.

Dynamic width can be achieved if the option textarea.dynWidth is set to true, then the host-element must have the css properties width: auto & float: left set, additionally your textarea element must have the html attribute wrap="auto" applied, to disable the autowrapping.

Use the textarea demo to test dynamic sized textareas. Unsupported are the following elements:

img, video, audio, input, embed, object, canvas, button, datalist, fieldset, label, legend, meter, optgroup, option, output, progress, select, [... and maybe more]
If you need support for a yet unsupported element, please open a issue on github.

The plugin was built to be used on "normal" elements, however flexbox is a popular and accepted standard.
Currently I haven't managed to create a automatic and reliable flexbox detection, so you have to take action by yourself:


In the most cases this should be enough.

However if the plugin isn't updating correctly or if the plugin isn't working at all, I can only recommend to use / create a inner-div with the style display: block; height: 100%; width: 100%; and initialize to plugin to that inner-div. With this setup the plugin will definitely work.

If you need help with a special flexbox case, please open a issue on github with a small demo.
I'll do my best to solve your problem.

The initialization of the plugin for a cerain element is very easy:

//initializes the plugin to a single element and returns its instance
var instance = OverlayScrollbars(document.getElementById(id), { /* your options */ }); 

The first argument is the element or the elements to which the plugin shall be initialized. The second argument represents the options with which the plugin shall be initialized.
If you initialize the plugin to a single element, this method will return the instance of the plugin.

You can get the current instance with the same method.

//returns the plugin instance or undefined if the element has no instance
var instance = OverlayScrollbars(document.getElementById(id));

If you have initialized the plugin and try to initialize it again, it will be handled as if you call the options method:

 //initializes plugin
OverlayScrollbars(document.getElementById(id), { }); 

//... later
//is the same as .options({ resize : "both" }) because the plugin is initialized already
OverlayScrollbars(document.getElementById(id), { resize : "both" }); 

The initialization for multiple elements works like the initialization for a single element. The only difference is, that the initialization method will return a array of instances.

//initialize plugin with custom options on all div elements and return all instances as array
var instances = OverlayScrollbars(document.querySelectorAll("div"), { }); 

If you need the instances of multiple element you can do it the same way as for a single element:

//get the instance information of all elements on your page and store it into a variable
//the array can contain undefined entries
var instances = OverlayScrollbars(document.querySelectorAll("*")); 

for(var i = 0; i < instances.length; i++) {
    //check for validity
    if(instances[i] !== undefined) {
        //do domething with the instance
    }
}

I've built-in a filtering possibility, if you want an array only with not undefined instances:

//returns an array with all instances which are not undefined
var instances = OverlayScrollbars(document.querySelectorAll("*"), "!"); 

for(var i = 0; i < instances.length; i++) {
    //do something with the instance
}

Since v1.6.0 you can pass a custom filtering function.
This function has to return a boolean and takes two arguments:
The first argument is called element. This is the current HTMLElement which gets checked.
The second argument is called instance. This is the OverlayScrollbars instance of the current element which gets checked.

//returns an array with all instances which are not undefined and applied to a div-tag-element
var instances = OverlayScrollbars(document.querySelectorAll("*"), 
    function(element, instance) { 
        return element.tagName === 'DIV' && instance !== undefined;
    }
); 

for(var i = 0; i < instances.length; i++) {
    //do something with the instance
}

The initialization with extensions provides a possibility to initialize your instance with one or multiple extensions.
You simply have to pass a third argument which has to be a string, an array of strings or an object. This argument represents the extensions which shall be added right after the initialization is complete.

Let's make some examples:

//register a extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", function() { return { }; });
//register a 2nd extension with the name "myOtherExtension"
OverlayScrollbars.extension("myOtherExtension", function() { return { }; });

//initialize the plugin with just one extension via string
OverlayScrollbars((document.getElementById(id), { }, "myExtension"); 

//initialize the plugin with multiple extensions via array of strings
OverlayScrollbars((document.getElementById(id), { }, [ "myExtension", "myOtherExtension" ]); 

//initialize the plugin with extensions with custom options via object
OverlayScrollbars((document.getElementById(id), { }, {
    "myExtension"      : { /* options for "myExtension" */ },
    "myOtherExtension" : { /* options for "myOtherExtension" */ },
}); 

The initialization of the plugin for a certain element is very easy and it won't break the jQuery chain:

//initializes the plugin with empty options
$(id).overlayScrollbars({ /* your options */ }); 

The object which is passed to this method represents the options with which the plugin shall be initialized.

You can get the current instance with the same method.

//returns the plugin instance or undefined if the element has no instance
var instance = $(id).overlayScrollbars(); 

Due to the fact that the initialization won't break the jQuery chain you can initialize and store the instance in just one line:

 //initializes plugin and stores the instance into a variable
var instance = $(id).overlayScrollbars({ }).overlayScrollbars();

If you have initialized the plugin and try to initialize it again, it will be handled as if you called the options method:

 //initializes plugin
$(id).overlayScrollbars({ });

//... later
//is the same as .options({ resize : "both" }) because the plugin is initialized already
$(id).overlayScrollbars({ resize : "both" });

The initialization for multiple elements works like the initialization for a single element. The only difference is, that the initialization method will return an array of instances.

//initialize plugin with custom options on all div elements and return all instances as array
var instances = $("div").overlayScrollbars({ }).overlayScrollbars(); 

If you need the instances of multiple elements you can do it the same way as for a single element:

//get the instance information of all elements on your page and store it into a variable
//the array can contain undefined entries
var instances = $("*").overlayScrollbars();

$.each(instances, function(index, instance) {
    //check for validity
    if(instance !== undefined) {
        //do domething with the instance
    }
});

I've built-in a filtering possibility, if you want an array only with not undefined instances:

//returns a array with all instances which are not undefined
var instances = $("*").overlayScrollbars("!");

$.each(instances, function(index, instance) {
    //do domething with the instance
});

Since v1.6.0 you can pass a custom filtering function.
This function has to return a boolean and takes two arguments:
The first argument is called element. This is the current HTMLElement which gets checked.
The second argument is called instance. This is the OverlayScrollbars instance of the current element which gets checked.

//returns a array with all instances which are not undefined and applied to a div-tag-element
var instances = $("*").overlayScrollbars(function(element, instance) { 
    return element.tagName === 'DIV' && instance !== undefined;
}); 

for(var i = 0; i < instances.length; i++) {
    //do something with the instance
}

The initialization with extensions provides a possibility to initialize your instance with one or multiple extensions.
You simply have to pass a second argument which has to be a string, an array of strings or an object. This argument represents the extensions which shall be added right after the initialization is complete.

Lets make some examples:

//register a extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", function() { return { }; });
//register a 2nd extension with the name "myOtherExtension"
OverlayScrollbars.extension("myOtherExtension", function() { return { }; });

//initialize the plugin with just one extension via string
$(id).overlayScrollbars({ }, "myExtension"); 

//initialize the plugin with multiple extensions via array of strings
$(id).overlayScrollbars({ }, [ "myExtension", "myOtherExtension" ]); 

//initialize the plugin with extensions with custom options via object
$(id).overlayScrollbars({ }, {
    "myExtension"      : { /* options for "myExtension" */ },
    "myOtherExtension" : { /* options for "myOtherExtension" */ },
}); 

Returns or sets the options of the instance.

Updates the instance.
Use this method to reset the "sleep" behavior of the sleep method or use it to update the instance manually.

Disables every observation of the DOM and puts the instance to "sleep".
It won't respond to any changes in the DOM and won't update. Scrollbars won't respond to mouse or touch events.
Resizing isn't possible anymore.
This behavior can be reset by calling the update method.

Use this method before expensive DOM operations (such as animations) to make sure the plugin won't slow them down unnecessary.
Dont forget to re-enable it after the operations via the update method.

Returns the scroll information or sets the scroll position.

Stops the current scroll-animation.

Returns all relevant elements.

Returns a object which describes the current state of this instance.

Destroys and disposes the current instance and removes all extensions and added elements from the DOM.

Returns the instance of a certain extension of the current plugin instance. added in v1.5.0

Adds a extension to the current instance. added in v1.5.0

Removes an extension from the current instance. added in v1.5.0

Returns or Sets the default options for each new plugin initialization.

Returns a plain object which contains global information about the plugin and each instance of it.

Registers, Unregisters or returns extensions. added in v1.5.0

Checks whether a passed object is a non-destroyed OverlayScrollbars instance. added in v1.9.0

The extension system was added in v1.5.0.
Since each app has its own environment with its own requirements, it is impossible to cover all edge-cases within the standard features.
Extensions provides a simple and elegant way to implement non-standard features into OverlayScrollbars.
A extension can be added right at the initialization of a OverlayScrollbars instance or with the addExt method of a OverlayScrollbars instance. To remove a extension you have two possibilities. You can do it via the removeExt method or you can destroy the OverlayScrollbars instance. This will remove all extensions. A extensionFactory is basically a function which is returning a object. This object is the instance of your extension.
The most simple extension would look like this:

var extensionFactory = function() { 
    return { }; //<- this is the actual extension
};

In order to make it more simple and comfortable for developers, the function has a bunch of parameters which make the development much easier. Furthermore the this-context of the extensionFactory function is the OverlayScrollbars instance which is trying to add the extension.

var extensionFactory = function(defaultOptions, framework, compatibility) { 
    var osInstance = this;
    return { }; //<- this is the actual extension
};

Parameter	Description
defaultOptions	The "defaultOptions" value which were passed to the global extension method in order to register this extension. If no defaultOptions value was passed this parameter is undefined.
framework	The framework which OverlayScrollbars is using internally in order to make it simpler to manipulate and traverse the DOM. If the jQuery version is used, this parameter is the jQuery object. However, if the non-jQuery version is used, this parameter is a jQuery-like-object which has the same API-structure as jQuery but doesn't offer all its functionality. A documentation of the supported methods can be found here.
compatibility	A object which offers compatibility methods. These methods are unifying native methods which are different or not present across all browsers. (for example if methods or objects have vendor prefixes, different names or signatures and so on...) A documentation of all methods can be found here.

You are free to design your extension instance as you like.
However, every extension can have 4 methods which interact directly with the OverlayScrollbars instance. These methods have fixed (reserved) names and they are only called from the OverlayScrollbars instance itself. They can't be called from the outside.
The names of these methods are:

Method Name	Description
contract	Gets called if an instance tries to add an extension. Use this method to determine whether the extension can be added or not. With this method you have the opportunity to abort the adding process. This method has to return a boolean, if the method returns any other type, the method will be ignored. If the method returns true the extension will be added, if it returns false the extension won't be added. If your extension doesn't have a contract method the extension will be added always. The method has one parameter: global : The global object of OverlayScrollbars. (The global window object)
added	Gets called once the extension was successfully added to a OverlayScrollbars instance. Use this method to add all your functionality, DOM elements and so on. The method has one parameter: options : The custom options which have been passed to the extension. This parameter is optional and can be undefined if no options were passed.
removed	Gets called once the extension was removed from a OverlayScrollbars instance. Use this method to remove all your added functionality, DOM elements and so on. The method has no parameters.
on	Gets called after a event happened. The method has two parameters: callbackName : The callback name as specified in the options but without the prefix "on". For exampple the if the event onOverflowChanged happened this parameter is overflowChanged. callbackArgs : The corresponding callback argument. A documentation of all callback arguments can be read here.

A small code example:

var extensionFactory = function(defaultOptions, compatibility, framework) { 
    var osInstance = this;
    var extension = { };
    
    //the reserved "contract" method, can't be called freely
    extension.contract = function(global) { /* code... */ }
    
    //the reserved "added" method, can't be called freely
    extension.added = function(options) { /* code... */ };
    
    //the reserved "removed" method, can't be called freely
    extension.removed = function() { /* code... */ };
    
    //the reserved "on" method, can't be called freely
    extension.on = function(callbackName, callbackArgs) { /* code... */ };
    
    //a custom method which can be called freely
    extension.myCustomMethod = function() { /* code... */ };
    
    return extension;
};

I've designed the extension system to be simple and powerful at the same time. However if you're missing any features please open an issue on github and make your suggestion.

The extension system was added in v1.5.0.
Before you read this section, please make sure you've read and understand the extension basics.

This section is here to show example templates which shall illustrate how you write an extension correctly. If you've written your own extension and you want to make it available for everyone, please open an issue on github. After I've reviewed your extension it will be listed on the official extensions page where everyone can download it.

This plugin comes with three very basic built-in themes:
The "none" theme hides basically the appearance of the scrollbars.
Its class name is .os-theme-none. Thus it can be activated if you set the className option to this value or null.

Here is a quick demo of this theme:

//initializes the plugin with "none" -theme
OverlayScrollbars(document.getElementById(id), { className : null });

The "dark" theme is a very simple and clean theme with a dark touch.
It's class name is .os-theme-dark. Thus it can be activated if you set the className option to this value.

Here is a quick demo of this theme:

//initializes the plugin with "dark" -theme
OverlayScrollbars(document.getElementById(id), { className : "os-theme-dark" }); 

The "light" theme is a very simple and clean theme with a bright touch.
It's class name is .os-theme-light. Thus it can be activated if you set the className option to this value.

Here is a quick demo of this theme:

//initializes the plugin with "light" -theme
OverlayScrollbars(document.getElementById(id), { className : "os-theme-light" }); 

The scrollbar styling is very simple if you understand the selectors and their meanings.
I've tried to use self explanatory class names.
The plugin is adding several class names to the host-element. Some of them are always present and some are only present if a certain behavior is fulfilled. This class names helps us to understand the current state of the plugin & scrollbars.

Here is a complete listing of all class names of the host-element:

Class Name	Description
.os-host	Indicates whether this element is a host-element. Only applied if the host-element is NOT for a textarea (the target-element is NOT a textarea element).
.os-host-textarea	Indicates whether this element is a host-element for a textarea. Only applied if the host-element is for a textarea (the target-element is a textarea element).
.os-host-transition	Indicates that the plugin is fully initialized and transitions are possible now.
.os-host-rtl	Indicates whether the detected horizontal scroll direction is RTL (Right To Left).
.os-host-resize-disabled	Indicates that the resize option is set to "none".
.os-host-scrolling	Indicates that a scroll is performing right now.
.os-host-overflow	Indicates whether a overflow on any axis is present.
.os-host-overflow-x	Indicates whether a overflow on the x-axis is present.
.os-host-overflow-y	Indicates whether a overflow on the y-axis is present.
.os-host-scrollbar-horizontal-hidden	Indicates whether the horizontal scrollbar is hidden due to the "visibility" option. (If set to "hidden" this class is always applied. If set to "visible" this class is never applied. If set to "auto" this class is only applied if a overflow on the x-axis is present.)
.os-host-scrollbar-vertical-hidden	Indicates whether the vertical scrollbar is hidden due to the "visibility" option. (If set to "hidden" this class is always applied. If set to "visible" this class is never applied. If set to "auto" this class is only applied if a overflow on the y-axis is present.)
*	The class name(s) which is set by the option "className".

Now that we are aware of the class names of the host-element, we can continue with the structure of the scrollbars.
Both scrollbars have the same DOM structure.

Here is a draft of the scrollbars DOM structure as well as the intended design:

<div class="os-host">
    <!-- ... --->
    <div class="os-scrollbar os-scrollbar-horizontal">
        <div class="os-scrollbar-track">
            <div class="os-scrollbar-handle">
            </div>
        </div>
    </div>
    <div class="os-scrollbar os-scrollbar-vertical">
        <div class="os-scrollbar-track">
            <div class="os-scrollbar-handle">
            </div>
        </div>
    </div>
    <div class="os-scrollbar-corner">
    </div>
</div>

Each of the scrollbar elements can have additional classes. These classes get added if a certain behavior is fulfilled.
Here is a complete listing of all class names of the .os-scrollbar element:

Class Name	Description
.os-scrollbar	Indicates that this element is a scrollbar. (The root element of all scrollbar elements)
.os-scrollbar-horizontal	Indicates that this element is a horizontal scrollbar.
.os-scrollbar-vertical	Indicates that this element is a vertical scrollbar.
.os-scrollbar-auto-hidden	Indicates that this scrollbar is hidden because of the "autoHide" option. Note that this scrollbar is potentially visible and is only hidden due to the configurated "autoHide" effect.
.os-scrollbar-auto-hidden	Indicates that this scrollbar is hidden because of the "autoHide" option. Note that this scrollbar is potentially visible and is only hidden due to the configurated "autoHide" effect.
.os-scrollbar-unusable	Indicates that this scrollbar is not usable due to no overflow or deactivation via the "overflowBehavior" option.

Here is a complete listing of all class names of the os-scrollbar-track element:

Class Name	Description
.os-scrollbar-track	Indicates that this element is a scrollbar track.
.os-scrollbar-track-off	Indicates that click scrolling is not possible. Only applied if the "scrollbars.clickScrolling" option is false.

Here is a complete listing of all class names of the .os-scrollbar-handle element:

Class Name	Description
.os-scrollbar-handle	Indicates that this element is a scrollbar handle.
.os-scrollbar-handle-off	Indicates that drag scrolling is not possible. Only applied if the "scrollbars.dragScrolling" option is false.

Please read first the Class Names section before you do any styling. It's very important to understand the class names and their meaning to not mess anything up!

Do only change styles of element which have the following class names:

Element
.os-scrollbar
.os-scrollbar-track
.os-scrollbar-handle
.os-scrollbar-corner

If you have to apply a style to any other element which is generated by the plugin, it's most likely wrong and there must be a different way. If this isn't the case, please open a issue on github.

Due to necessary Javascript optimization the ":active" pseudo-class doesn't work / won't be applied on all elements listed above. A class with the name ".active" will be applied instead to provide the same functionality. Here is a example how you must write your selector if you want to style an ":active" element:

/* incorrect */
.os-scrollbar:active,
.os-scrollbar-track:active,
.os-scrollbar-handle:active {
    /* DON'T use the :active pseudo-class */
}

/* correct */
.os-scrollbar.active,
.os-scrollbar-track.active,
.os-scrollbar-handle.active {
    /* USE the .active class insted */
}

Let's say you like the built-in "dark" theme, but you hate the rounded corners of the handles.
Well, in this case you don't have to rewrite the whole style again.

You can add multiple classes via the "className" option. Just separate them with blanks (spaces).
Now you can do something like that:

//initialize the plugin with custom classnames
OverlayScrollbars(document.getElementById(id), { 
    className : "os-theme-dark os-theme-dark-edgy" 
});

After this command, your host-element has the "dark" -theme applied but has also the class .os-theme-dark-edgy.
Now you can define some additional style rules:

.os-theme-dark.os-theme-dark-edgy > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    border-radius: 0px;
}

Make sure that this rule overrules the default "dark" -theme rules (e.g. put it at the bottom or use !important).
That's it! With this "system" you can achieve very flexible styling.
You can change the scrollbar-handle length via CSS. I know, it's a bit unusual to do it that way, but it's the most efficient and elegant way, since you can do anything with any CSS-unit such as pixel, percent and so on.
Below is a full example how to achieve different handle-length styles across different instances.

First we write our CSS style rules, note the selector, this styles only apply if the host-element has the class limited-handles:

.limited-handles > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    max-width: 50%;
    min-width: 30px;
}
.limited-handles > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    max-height: 50%;
    min-height: 30px;
}

We have defined the required CSS, now we have to initialize the plugin correctly with the above described theme inheritance technique:

OverlayScrollbars(document.getElementById(id), { 
    className : "os-theme-dark limited-handles" 
});

The result looks like this:
This is pretty much the same as changing the handle-length.
First we write our CSS style rules:

.deviant-scrollbars > .os-scrollbar-horizontal {
    top: 0;
    right: 0;
    bottom: auto;
    left: 10px;
    width: 50%;
    background: rgba(0, 0, 255, 0.3);
}
.deviant-scrollbars > .os-scrollbar-vertical {
    left: 0;
    bottom: 0;
    right: auto;
    top: 10px;
    height: 50%;
    background: rgba(255, 0, 0, 0.3);
}
.deviant-scrollbars.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
    top: 0;
}
.deviant-scrollbars.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {
    left: 0;
}

Then we initialize the plugin correctly:

OverlayScrollbars(document.getElementById(id), { 
    className : "os-theme-dark deviant-scrollbars" 
});

The result looks like this:

In the themes section you can find CSS templates for the most common scrollbar styles.
You can download and customize them as you want.

Here is a simple but very efficient SCSS template. (even if you dont know SCSS, this template will give you a basic idea)
If you don't need anything too fancy this template should be well suited for your needs.

Just copy & paste it and set the variables as you like:

//your theme name
$theme-name: os-theme-custom;

//horizontal scrollbar
$scrollbar-horizontal-size: 6px; //horizontal scrollbar height
$scrollbar-horizontal-padding: 2px;
$scrollbar-horizontal-inner-expansion: 6px;
$scrollbar-horizontal-track-background: transparent;
$scrollbar-horizontal-track-background-hover: transparent;
$scrollbar-horizontal-track-background-active: transparent;
$scrollbar-horizontal-track-transition: background-color 0.3s;
$scrollbar-horizontal-handle-min-size: 30px; //horizontal scrollbar handle min width
$scrollbar-horizontal-handle-max-size: none; //horizontal scrollbar handle max width
$scrollbar-horizontal-handle-background: rgba(0, 0, 0, 0.4);
$scrollbar-horizontal-handle-background-hover: rgba(0, 0, 0, 0.6);
$scrollbar-horizontal-handle-background-active: rgba(0, 0, 0, 1);
$scrollbar-horizontal-handle-transition: background-color 0.3s;

//vertical scrollbar
$scrollbar-vertical-size: 6px; //vertical scrollbar width
$scrollbar-vertical-padding: 2px;
$scrollbar-vertical-inner-expansion: 6px;
$scrollbar-vertical-track-background: transparent;
$scrollbar-vertical-track-background-hover: transparent;
$scrollbar-vertical-track-background-active: transparent;
$scrollbar-vertical-track-transition: background-color 0.3s;
$scrollbar-vertical-handle-min-size: 30px; //vertical scrollbar handle min height
$scrollbar-vertical-handle-max-size: none; //vertical scrollbar handle max height
$scrollbar-vertical-handle-background: rgba(0, 0, 0, 0.4);
$scrollbar-vertical-handle-background-hover: rgba(0, 0, 0, 0.6);
$scrollbar-vertical-handle-background-active: rgba(0, 0, 0, 1);
$scrollbar-vertical-handle-transition: background-color 0.3s;

//scrollbar corner
$scrollbar-corner-background-color: transparent;

.#{$theme-name} > .os-scrollbar-horizontal {
    right: $scrollbar-vertical-size + ($scrollbar-vertical-padding * 2);
    height: $scrollbar-horizontal-size;
    padding: $scrollbar-horizontal-padding;
}
.#{$theme-name} > .os-scrollbar-vertical {
    bottom: $scrollbar-horizontal-size + ($scrollbar-horizontal-padding * 2);
    width: $scrollbar-vertical-size;
    padding: $scrollbar-vertical-padding;
}
.#{$theme-name}.os-host-rtl > .os-scrollbar-horizontal {
    left: $scrollbar-vertical-size + ($scrollbar-vertical-padding * 2);
    right: 0;
}
.#{$theme-name} > .os-scrollbar-corner {
    height: $scrollbar-horizontal-size + ($scrollbar-horizontal-padding * 2);
    width: $scrollbar-vertical-size + ($scrollbar-vertical-padding * 2);
    background-color: $scrollbar-corner-background-color;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track {
    background: $scrollbar-horizontal-track-background;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track {
    background: $scrollbar-vertical-track-background;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track:hover {
    background: $scrollbar-horizontal-track-background-hover;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track:hover {
    background: $scrollbar-vertical-track-background-hover;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track.active {
    background: $scrollbar-horizontal-track-background-active;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track.active {
    background: $scrollbar-vertical-track-background-active;
}
.#{$theme-name}.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track {
    -webkit-transition: $scrollbar-horizontal-track-transition;
            transition: $scrollbar-horizontal-track-transition;
}
.#{$theme-name}.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track {
    -webkit-transition: $scrollbar-vertical-track-transition;
            transition: $scrollbar-vertical-track-transition;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before,
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
    top: -$scrollbar-horizontal-inner-expansion;
    bottom: -$scrollbar-horizontal-padding;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    left: -$scrollbar-vertical-inner-expansion;
    right: -$scrollbar-vertical-padding;
}
.#{$theme-name}.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    right: -$scrollbar-vertical-inner-expansion;
    left: -$scrollbar-vertical-padding;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    border-radius: $scrollbar-horizontal-size;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    border-radius: $scrollbar-vertical-size;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    min-width: $scrollbar-horizontal-handle-min-size;
    max-width: $scrollbar-horizontal-handle-max-size;
    background: $scrollbar-horizontal-handle-background;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    min-height: $scrollbar-vertical-handle-min-size;
    max-height: $scrollbar-vertical-handle-max-size;
    background: $scrollbar-vertical-handle-background;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover {
    background: $scrollbar-horizontal-handle-background-hover;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover {
    background: $scrollbar-vertical-handle-background-hover;
}
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active {
    background: $scrollbar-horizontal-handle-background-active;
}
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active {
    background: $scrollbar-vertical-handle-background-active;
}
.#{$theme-name}.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    -webkit-transition: $scrollbar-horizontal-handle-transition;
            transition: $scrollbar-horizontal-handle-transition;
}
.#{$theme-name}.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    -webkit-transition: $scrollbar-vertical-handle-transition;
            transition: $scrollbar-vertical-handle-transition;
}

If you have any problems with styling or you can't achieve your desired style, open a issue on github.

To achieve the desired functionality, the plugin adds additional elements to your DOM.
Each element has a specific purpose.