A lightweight, dependency-free scrollbar library written in vanilla javascript. Horizontal scrolling with mousewheel and textarea support are experimental and may not work in certain browsers. MiniBar utilizes the MutationObserver API to automatically detect changes in content so the dimensions can be updated. It will only use the API if your browser supports it. If it doesn’t then you must call the update() method when adding / removing / updating the containers content otherwise the scroll bar position and size will be incorrect.
Features:
- Fully customisable via CSS
- Native scrolling behaviour preserved
- Vertical and horizontal scroll support
- Textarea support
- Horizontal scrolling with mousewheel
Install
Installing plugin via NPM
Libraries
Grab the files from the CDN and include them in your project:
<link href="https://unpkg.com/minibarjs@latest/dist/minibar.min.css" rel="stylesheet" type="text/css"> <script src="https://unpkg.com/minibarjs@latest/dist/minibar.min.js" type="text/javascript">script> |
You can replace latest with the required release number if needed.
HTML
Here simple html dic container where we need to apply custom scrolling.
|
Your content go here..
JS
You can instantiate MiniBar by passing a reference to your content as the first parameter of the constructor as either a DOM node or a CSS3 selector string:
new MiniBar(document.getElementById('myContent')); // or new MiniBar('#myContent'); |
Here are the list of options you can use to customize the plugin.
new MiniBar('#myContent', { barType: "default", minBarSize: 10, hideBars: false, /* v0.4.0 and above */ alwaysShowBars: false, horizontalMouseScroll: false, scrollX: true, scrollY: true, navButtons: false, scrollAmount: 10, mutationObserver: { attributes: false, childList: true, subtree: true }, /* v0.4.0 and above */ onInit: function() { /* do something on init */ }, /* v0.4.0 and above */ onUpdate: function() { /* do something on update */ }, /* v0.4.0 and above */ onScroll: function() { /* do something on init */ }, classes: { container: "mb-container", content: "mb-content", track: "mb-track", bar: "mb-bar", visible: "mb-visible", progress: "mb-progress", hover: "mb-hover", scrolling: "mb-scrolling", textarea: "mb-textarea", wrapper: "mb-wrapper", nav: "mb-nav", btn: "mb-button", btns: "mb-buttons", increase: "mb-increase", decrease: "mb-decrease", item: "mb-item", /* v0.4.0 and above */ itemVisible: "mb-item-visible", /* v0.4.0 and above */ itemPartial: "mb-item-partial", /* v0.4.0 and above */ itemHidden: "mb-item-hidden" /* v0.4.0 and above */ } }); |
See live demo and download source code.
This awesome plugin is developed by Mobius1. Visit their official github repository for more information and follow for future updates.
