Stylish Custom Scrollbar In Pure JavaScript – MiniBar

Preview:

Description:

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
$ 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
instance.scrollToTop();
// scroll to bottom
instance.scrollToBottom();
// recalculates scollbar sizes and positions
instance.update();
// destroys the scrollbar
instance.destroy();

Changelog:

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

11/10/2018

• v0.3.3: Update track positions

09/29/2018

• v0.3.2: disconnect observer on destroy