Lightweight scrollbar library written in pure javascript – MiniBar

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.

  • Fully customisable via CSS
  • Native scrolling behaviour preserved
  • Vertical and horizontal scroll support
  • Textarea support
  • Horizontal scrolling with mousewheel


Installing plugin via NPM

npm install minibarjs


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

<link href="[email protected]/dist/minibar.min.css" rel="stylesheet" type="text/css">
<script src="[email protected]/dist/minibar.min.js" type="text/javascript"></script>

You can replace latest with the required release number if needed.


Here simple html dic container where we need to apply custom scrolling.

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


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.


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