Stylish Custom Scrollbar In Pure JavaScript – MiniBar

Category: Javascript , Recommended | October 7, 2020
Views Total:2,601 views
Official Page:Go to website
Last Update:October 7, 2020


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);
// scroll to top
// scroll to bottom
// recalculates scollbar sizes and positions
// destroys the scrollbar


v0.5.1 (10/07/2020)

  • Removed debug code

v0.5.0 (09/29/2020)

  • Added scrollToTop() method
  • Added scrollToBottom() method
  • Made some methods private

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