Stylish Custom Scrollbar In Pure JavaScript – MiniBar

Category: Javascript , Recommended | October 22, 2019
Author: Mobius1
Views Total: 1,139 views
Official Page: Go to website
Last Update: October 22, 2019
License: MIT


Stylish Custom Scrollbar In Pure JavaScript – MiniBar


MiniBar is a pure JavaScript library that allows you to create custom scrollbars using your own CSS classes. Based on the MutationObserver API.

Supports both scrollable container and the whole document. Also can be used as a progress indicator as you scroll down the web content.

How to use it:

Install the minibar via package managers.

$ npm install minibarjs

# Bower
$ bower install minibarjs

Import the minibarjs into your project or directly include the JavaScript and CSS files on the webpage.

<link rel="stylesheet" href="minibar.min.css">
<script src="minibar.min.js"></script>

Initialize the MiniBarjs on the target container.

new MiniBar('#myContent');

Style the custom scrollbar in the CSS.

.mb-track { border-radius: 5px; }

.mb-bar { background-color: #4C9689; }

body > .mb-container > .mb-track {
  background-color: #110c10;
  border-radius: 5px;

Default configuration properties.

new MiniBar('#myContent',{

    // or progress
    barType: "default",

    // min size
    minBarSize: 10,

    // always shows scrollbars
    alwaysShowBars: false,

    // enables horizontal/vertical scrollbars
    scrollX: true,
    scrollY: true,

    // shows nav buttons
    navButtons: false,

    // scroll amount in pixels
    scrollAmount: 10,
    // MutationObserver API
    mutationObserver: {
      attributes: false,
      childList: true,
      subtree: true

    // default classes
    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"


Callback functions.

new MiniBar('#myContent',{

    onInit: function() {},
    onUpdate: function() {},
    onStart: function() {},
    onScroll: function() {},
    onEnd: function() {},


API methods.

// scrolls to a specific point
instance.scrollTo(position, axis);

// scrolls the content by a certain amount
instance.scrollBy(amount, axis, duration, easing);

// recalculates scollbar sizes and positions

// destroys the scrollbar


v0.4.2 (10/22/2019)

  • Possible to scroll by clicking on the track

v0.4.0 (11/20/2018)

  • Added scrollTo() method
  • Added observableItems option (requires IntersectionObserver support)
  • Added hideBars option
  • Added onInit, onUpdate, onScroll options


  • v0.3.3: Update track positions


  • v0.3.2: disconnect observer on destroy

You Might Be Interested In:

Leave a Reply