@kigi/overlayscrollbars
v1.0.0
Published
A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
Downloads
93
Maintainers
Readme
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 (IE8+, Safari6+, Firefox, Opera, Chrome and Edge).
- 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:
npm install overlayscrollbars-react
npm install overlayscrollbars-vue
npm install overlayscrollbars-ngx
Sponsors
Dependencies
The default version doesn't requires any dependencies!
If you are using the jQuery dependent version it obviously requires jQuery 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.
cdn
You can use OverlayScrollbars via a cdn.
npm
OverlayScrollbars can be downloaded from npm.
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.
<!-- 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 before the plugin and use jquery.overlayScrollbars.js
<!-- 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:
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:
$(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:
npm install @types/overlayscrollbars
I recommend setting these options in your tsconfig.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.
Methods
Click on the method name to open a more detailed documentation.
Instance methods:
Global methods:
Tests
It's a challenge to fully test a library like OverlayScrollbars, because it has to adapt to countless DOM setups and browsers. Nevertheless I've developed basic GUI-Tests. In these tests a element with applied OverlayScrollbars is compared to a native element.
You can run the tests by visiting this page and clicking on the Run
button. Please be aware that the tests need some time to complete.
After the process is complete, the results are displayed in the console.
In case some tests are failing on your end, please open a issue with the console output of the tests (the failed
array in particular).
Future Plans
- Minimize the code as much as possible.
- Frequent updates in terms of bug-fixes and enhancements.
- Improve tests
License
MIT