Lightweight scrollbar library written in pure javascript – MiniBar

by Posted on

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.
javascript-scroll
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

npm install minibarjs

Libraries

Grab the files from the CDN and include them in your project:

<link href="https://unpkg.com/[email protected]/dist/minibar.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/[email protected]/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.

<div id="myContent">
Your content go here..
</div>

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'));
 

 
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,  
    alwaysShowBars: false,
    horizontalMouseScroll: false,
 
    scrollX: true,
    scrollY: true,
 
    navButtons: false,
    scrollAmount: 10,
 
    mutationObserver: {
        attributes: false,
        childList: true,
        subtree: true
    },
 
     
    onInit: function() {
    
    },
 
     
    onUpdate: function() {
    
    },
 
     
    onScroll: function() {
    
    },
 
    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", 
        itemVisible: "mb-item-visible", 
        itemPartial: "mb-item-partial", 
        itemHidden: "mb-item-hidden" 
    }
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by Mobius1. Visit their official github repository for more information and follow for future updates.


Published by admin