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/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.

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

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