File: /home/bishwesh/internstolearn.com/node_modules/overlayscrollbars/README.md
<p align="center">
<a href="https://kingsora.github.io/OverlayScrollbars">
<a href="https://kingsora.github.io/OverlayScrollbars"><img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars"></a>
</a>
</p>
<h6 align="center">
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/package.json"><img src="https://img.shields.io/david/kingsora/overlayscrollbars.svg?style=flat-square" alt="Dependencies"></a>
<a href="https://www.npmjs.com/package/overlayscrollbars"><img src="https://img.shields.io/npm/dt/overlayscrollbars.svg?style=flat-square" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/overlayscrollbars"><img src="https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square" alt="Version"></a>
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
</h6>
<h3 align="center">
<a href="https://kingsora.github.io/OverlayScrollbars">Website</a>
•
<a href="https://kingsora.github.io/OverlayScrollbars/#!documentation">Documentation</a>
•
<a href="https://kingsora.github.io/OverlayScrollbars/#!demos">Demos</a>
•
<a href="https://kingsora.github.io/OverlayScrollbars/#!extensions">Extensions</a>
•
<a href="https://kingsora.github.io/OverlayScrollbars/#!faq">FAQ</a>
</h3>
> OverlayScrollbars is a javascript scrollbar plugin which hides native scrollbars, provides
custom styleable overlay scrollbars and keeps the native functionality and feeling.
## Why
I've created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.
## Goals & Features
- A simple, powerful and good documented API.
- High browser compatibility (<b>IE8+</b>, <b>Safari6+</b>, <b>Firefox</b>, <b>Opera</b>, <b>Chrome</b> and <b>Edge</b>).
- Usage of the most recent technologies to ensure maximum efficiency and performance on newer browsers.
- Can be used without any dependencies or with jQuery.
- Automatic update detection - after the initialization you don't have to worry about updating.
- Extremely powerful scroll method with features like animations, relative coordinates, scrollIntoView and more.
- Mouse and touch support.
- Textarea and Body support.
- RTL Direction support. (with normalization)
- Simple and effective scrollbar-styling.
- Rich extension system.
- TypeScript support.
## Framework Wrapper
OverlayScrollbars provides its own wrapper components for popular component-based front-end frameworks:
<img align="left" src="https://kingsora.github.io/OverlayScrollbars/frameworks/react/logo.svg" width="80" height="80" alt="React">
<a href="https://www.npmjs.com/package/overlayscrollbars-react"><img src="https://img.shields.io/npm/v/overlayscrollbars-react.svg?style=flat-square" alt="Version"></a>
<a href="https://www.npmjs.com/package/overlayscrollbars-react"><img src="https://img.shields.io/npm/dt/overlayscrollbars-react.svg?style=flat-square" alt="Downloads"></a>
[README](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react)
```sh
npm install overlayscrollbars-react
```
<img align="left" src="https://kingsora.github.io/OverlayScrollbars/frameworks/vue/logo.svg" width="80" height="80" alt="Vue">
<a href="https://www.npmjs.com/package/overlayscrollbars-vue"><img src="https://img.shields.io/npm/v/overlayscrollbars-vue.svg?style=flat-square" alt="Version"></a>
<a href="https://www.npmjs.com/package/overlayscrollbars-vue"><img src="https://img.shields.io/npm/dt/overlayscrollbars-vue.svg?style=flat-square" alt="Downloads"></a>
[README](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue)
```sh
npm install overlayscrollbars-vue
```
<img align="left" src="https://kingsora.github.io/OverlayScrollbars/frameworks/angular/logo.svg" width="80" height="80" alt="Angular">
<a href="https://www.npmjs.com/package/overlayscrollbars-ngx"><img src="https://img.shields.io/npm/v/overlayscrollbars-ngx.svg?style=flat-square" alt="Version"></a>
<a href="https://www.npmjs.com/package/overlayscrollbars-ngx"><img src="https://img.shields.io/npm/dt/overlayscrollbars-ngx.svg?style=flat-square" alt="Downloads"></a>
[README](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx)
```sh
npm install overlayscrollbars-ngx
```
## Sponsors
<table>
<tr>
<td>
<a href="https://www.browserstack.com" target="_blank">
<img align="center" src="https://kingsora.github.io/OverlayScrollbars/img/browserstack.png" width="250">
</a>
</td>
<td>
Thanks to <a href="https://www.browserstack.com" target="_blank">BrowserStack</a> for sponsoring open source projects and letting me test OverlayScrollbars for free.
</td>
</tr>
</table>
## Dependencies
**The default version doesn't requires any dependencies!**
If you are using the jQuery dependent version it obviously requires [jQuery](https://jquery.com/) to work.
It was tested with the jQuery versions: 1.9.1, 2.x, 3.x, and it won't work with jQuery slim.
## Download
#### manually
Download OverlayScrollbars manually from [Releases](https://github.com/KingSora/OverlayScrollbars/releases).
#### cdn
You can use OverlayScrollbars via a [cdn](https://cdnjs.com/libraries/overlayscrollbars).
#### npm
OverlayScrollbars can be downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars).
```sh
npm install overlayscrollbars
```
## Usage
#### HTML
Load your CSS file(s) before the JS file(s), to prevent unexpected bugs.
Include **OverlayScrollbars.css** and **OverlayScrollbars.js** to your HTML file.
```html
<!-- Plugin CSS -->
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
<!-- Plugin JS -->
<script type="text/javascript" src="path/to/OverlayScrollbars.js"></script>
```
If you are using the jQuery version, include [jQuery](https://jquery.com/) before the plugin and use **jquery.overlayScrollbars.js**
```html
<!-- Plugin CSS -->
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
<!-- jQuery JS -->
<script type="text/javascript" src="path/to/jquery.js"></script>
<!-- Plugin JS -->
<script type="text/javascript" src="path/to/jquery.overlayScrollbars.js"></script>
```
#### JavaScript
Initialize the plugin after your document has been fully loaded.
Default initialization:
```js
document.addEventListener("DOMContentLoaded", function() {
//The first argument are the elements to which the plugin shall be initialized
//The second argument has to be at least a empty object or a object with your desired options
OverlayScrollbars(document.querySelectorAll('body'), { });
});
```
jQuery initialization:
```js
$(function() {
//The passed argument has to be at least a empty object or a object with your desired options
$('body').overlayScrollbars({ });
});
```
#### TypeScript
OverlayScrollbars provides its own [TypeScript declarations](https://www.npmjs.com/package/@types/overlayscrollbars):
```sh
npm install @types/overlayscrollbars
```
I recommend setting these options in your **tsconfig.json**:
```json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
}
}
```
## Options
Due to clarity I can't provide all informations here.
Take the table below only as a overview of all options.
[Please read the much more detailed documentation](https://kingsora.github.io/OverlayScrollbars/#!documentation).
<table>
<thead>
<tr>
<th align="left" colspan="2">option</th>
<th align="left">type</th>
<th align="left">default</th>
<th align="left">description</th>
</tr>
</thead>
<tr>
<td colspan="2">className</td>
<td>string / null</td>
<td><code>"os-theme-dark"</code></td>
<td>The class name which shall be added to the host element.</td>
</tr>
<tr>
<td colspan="2">resize</td>
<td>string</td>
<td><code>"none"</code></td>
<td>The resize behavior of the host element. This option works exactly like the CSS3 resize property.</td>
</tr>
<tr>
<td colspan="2">sizeAutoCapable</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Indicates whether the host element is capable of "auto" sizes such as: <code>width: auto</code> and <code>height: auto</code>.</td>
</tr>
<tr>
<td colspan="2">clipAlways</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Indicates whether the content shall be clipped always.</td>
</tr>
<tr>
<td colspan="2">normalizeRTL</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Indicates whether RTL scrolling shall be normalized.</td>
</tr>
<tr>
<td colspan="2">paddingAbsolute</td>
<td>boolean</td>
<td><code>false</code></td>
<td>Indicates whether the padding for the content shall be absolute.</td>
</tr>
<tr>
<td colspan="2">autoUpdate</td>
<td>boolean / null</td>
<td><code>null</code></td>
<td>Indicates whether the plugin instance shall be updated continuously within a update loop.</td>
</tr>
<tr>
<td colspan="2">autoUpdateInterval</td>
<td>number</td>
<td><code>33</code></td>
<td>The interval in milliseconds in which a auto update shall be performed for this instance.</td>
</tr>
<tr>
<th align="left" colspan="5">nativeScrollbarsOverlaid : {</th>
</tr>
<tr>
<td></td>
<td>showNativeScrollbars</td>
<td>boolean</td>
<td><code>false</code></td>
<td>Indicates whether the native overlaid scrollbars shall be visible.</td>
</tr>
<tr>
<td></td>
<td>initialize</td>
<td>boolean</td>
<td><code>true</code></td>
<td>
Indicates whether the plugin shall be initialized even if the native scrollbars are overlaid.<br>
If you initialize the plugin on the body element, I recommend to set this option to false.
</td>
</tr>
<tr>
<th align="left" colspan="5">}</th>
</tr>
<tr>
<th align="left" colspan="5">overflowBehavior : {</th>
</tr>
<tr>
<td></td>
<td>x</td>
<td>string</td>
<td><code>"scroll"</code></td>
<td>The overflow behavior for the x (horizontal) axis.</td>
</tr>
<tr>
<td></td>
<td>y</td>
<td>string</td>
<td><code>"scroll"</code></td>
<td>The overflow behavior for the y (vertical) axis.</td>
</tr>
<tr>
<th align="left" colspan="5">}</th>
</tr>
<tr>
<th align="left" colspan="5">scrollbars : {</th>
</tr>
<tr>
<td></td>
<td>visibility</td>
<td>string</td>
<td><code>"auto"</code></td>
<td>The basic visibility of the scrollbars.</td>
</tr>
<tr>
<td></td>
<td>autoHide</td>
<td>string</td>
<td><code>"never"</code></td>
<td>The possibility to hide visible scrollbars automatically after a certain action.</td>
</tr>
<tr>
<td></td>
<td>autoHideDelay</td>
<td>number</td>
<td><code>800</code></td>
<td>The delay in milliseconds before the scrollbars gets hidden automatically.</td>
</tr>
<tr>
<td></td>
<td>dragScrolling</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Defines whether the scrollbar-handle supports drag scrolling.</td>
</tr>
<tr>
<td></td>
<td>clickScrolling</td>
<td>boolean</td>
<td><code>false</code></td>
<td>Defines whether the scrollbar-track supports click scrolling.</td>
</tr>
<tr>
<td></td>
<td>touchSupport</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Indicates whether the scrollbar reacts to touch events.</td>
</tr>
<tr>
<td></td>
<td>snapHandle</td>
<td>boolean</td>
<td><code>false</code></td>
<td>Indicates whether the scrollbar handle-offset shall be snapped.</td>
</tr>
<tr>
<th align="left" colspan="5">}</th>
</tr>
<tr>
<th align="left" colspan="5">textarea : {</th>
</tr>
<tr>
<td></td>
<td>dynWidth</td>
<td>boolean</td>
<td><code>false</code></td>
<td>Indiactes whether the textarea width will be dynamic (content dependent).</td>
</tr>
<tr>
<td></td>
<td>dynHeight</td>
<td>boolean</td>
<td><code>false</code></td>
<td>Indiactes whether the textarea height will be dynamic (content dependent).</td>
</tr>
<tr>
<td></td>
<td>inheritedAttrs</td>
<td>string / array / null</td>
<td><code>["style", "class"]</code></td>
<td><b>During initialization:</b> Attributes which the generated host-element shall inherit from from the target textarea-element.<br/>
<b>During destruction:</b> Attributes which the target textarea-element shall inherit from from the generated host-element.</td>
</tr>
<tr>
<th align="left" colspan="5">}</th>
</tr>
<tr>
<th align="left" colspan="5">callbacks : {</th>
</tr>
<tr>
<td></td>
<td>onInitialized</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the plugin was initialized. It takes no arguments.</td>
</tr>
<tr>
<td></td>
<td>onInitializationWithdrawn</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the initialization of the plugin was aborted due to the option <code>nativeScrollbarsOverlaid : { initialize : false }</code>. It takes no arguments.</td>
</tr>
<tr>
<td></td>
<td>onDestroyed</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the plugin was destryoed. It takes no arguments.</td>
</tr>
<tr>
<td></td>
<td>onScrollStart</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the user starts scrolling. It takes one argument.</td>
</tr>
<tr>
<td></td>
<td>onScroll</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after every scroll. It takes one argument.</td>
</tr>
<tr>
<td></td>
<td>onScrollStop</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the user stops scrolling. It takes one argument.</td>
</tr>
<tr>
<td></td>
<td>onOverflowChanged</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the overflow has changed. It takes one argument.</td>
</tr>
<tr>
<td></td>
<td>onOverflowAmountChanged</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the overflow amount has changed. It takes one argument.</td>
</tr>
<tr>
<td></td>
<td>onDirectionChanged</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the direction has changed. It takes one argument.</td>
</tr>
<tr>
<td></td>
<td>onContentSizeChanged</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the content size has changed. It takes one argument.</td>
</tr>
<tr>
<td></td>
<td>onHostSizeChanged</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the host size or host padding has changed. It takes one argument.</td>
</tr>
<tr>
<td></td>
<td>onUpdated</td>
<td>function / null</td>
<td><code>null</code></td>
<td>Gets fired after the host size has changed. It takes one argument.</td>
</tr>
<tr>
<th align="left" colspan="5">}</th>
</tr>
</table>
## Methods
Click on the method name to open a more detailed documentation.
#### Instance methods:
<table>
<thead>
<tr>
<th align="left">name</th>
<th align="left">description</th>
</tr>
</thead>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-options" target="_blank">.options()</a></b></td>
<td>Returns or sets the options of the instance.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//get options
var options = instance.options();
//set options
instance.options({ className : null });</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-update" target="_blank">.update()</a></b></td>
<td>Updates the instance.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//soft update
instance.update();
//hard update
instance.update(true);</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-sleep" target="_blank">.sleep()</a></b></td>
<td>Disables every observation of the DOM and puts the instance to "sleep". This behavior can be reset by calling the <code>update()</code> method.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//put the instance to sleep
instance.sleep();</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-scroll" target="_blank">.scroll()</a></b></td>
<td>Returns the scroll information or sets the scroll position.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//get scroll information
var scrollInfo = instance.scroll();
//scroll 50px on both axis
instance.scroll(50);
//add 10px to the scroll offset of each axis
instance.scroll({ x : "+=10", y : "+=10" });
//scroll to 50% on both axis with a duration of 1000ms
instance.scroll({ x : "50%", y : "50%" }, 1000);
//scroll to the passed element with a duration of 1000ms
instance.scroll($(selector), 1000);</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-scrollstop" target="_blank">.scrollStop()</a></b></td>
<td>Stops the current scroll-animation.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//scroll-animation duration is 10 seconds
instance.scroll({ y : "100%" }, 10000);
//abort the 10 seconds scroll-animation immediately
instance.scrollStop();
//scroll-animation duration is 1 second
instance.scroll({ y : "100%" }, 1000);</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-getelements" target="_blank">.getElements()</a></b></td>
<td>Returns all relevant elements.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//get the element to which the plugin was applied
var pluginTarget = instance.getElements().target;</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-getstate" target="_blank">.getState()</a></b></td>
<td>Returns a object which describes the current state of this instance.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//get the state of the plugin instance
var pluginState = instance.getState();</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-destroy" target="_blank">.destroy()</a></b></td>
<td>Destroys and disposes the current instance and removes all added elements form the DOM.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//destroy the instance
instance.destroy();</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-ext" target="_blank">.ext()</a></b></td>
<td>Returns the instance of a certain extension of the current plugin instance.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//get the instance of the extension "myExtension"
var extensionInstance = instance.ext("myExtension");</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-addext" target="_blank">.addExt()</a></b></td>
<td>Adds a extension to the current instance.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//add the registered extension "myExtension" to the plugin instance
var extensionInstance = instance.addExt("myExtension");</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-removeext" target="_blank">.removeExt()</a></b></td>
<td>Removes a extension from the current instance.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//add the registered extension "myExtension" to the plugin instance
instance.addExt("myExtension");
//remove the added extension "myExtension" from the plugin instance
instance.removeExt("myExtension");</pre>
</td>
</tr>
</table>
#### Global methods:
<table>
<thead>
<tr>
<th align="left">name</th>
<th align="left">description</th>
</tr>
</thead>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-defaultoptions" target="_blank">OverlayScrollbars.defaultOptions()</a></b></td>
<td>Returns or Sets the default options for each new plugin initialization.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//get the current defaultOptions
var defaultOptions = OverlayScrollbars.defaultOptions();
//set new default options
OverlayScrollbars.defaultOptions({
className : "my-custom-class",
resize : "both"
});</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-globals" target="_blank">OverlayScrollbars.globals()</a></b></td>
<td>Returns a plain object which contains global information about the plugin and each instance of it.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//get the global information
var globals = OverlayScrollbars.globals();</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-extension" target="_blank">OverlayScrollbars.extension()</a></b></td>
<td>Registers, Unregisters or returns extensions.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//register a dummy extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", function() { return { }; });
//unregister the extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", null);
//get the extension-object with the name "myExtension"
var registeredExtension = OverlayScrollbars.extension("myExtension");
//get all registered extension-objects
var extensionObjects = OverlayScrollbars.extension();</pre>
</td>
</tr>
<tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-valid" target="_blank">OverlayScrollbars.valid()</a></b></td>
<td>Checks whether the passed object is a non-destroyed OverlayScrollbars instance.</td>
</tr>
<tr>
<td colspan="2">
example(s):<br>
<pre lang="js">
//create OverlayScrollbars instance
var osInstance = OverlayScrollbars(document.body, { });
//returns true
OverlayScrollbars.valid(osInstance);
//destroy the instance
osInstance.destroy();
//returns false
OverlayScrollbars.valid(osInstance);
//returns false
OverlayScrollbars.valid({ });</pre>
</td>
</tr>
</table>
## Future Plans
- Minimize the code as much as possible.
- Frequent updates in terms of bug-fixes and enhancements.
## License
MIT