Stylish Custom Scrollbar In Pure JavaScript – MiniBar

Category: Javascript , Recommended | November 20, 2018
Author: Mobius1
Views Total: 2,697
Official Page: Go to website
Last Update: November 20, 2018
License: MIT

Preview:

Stylish Custom Scrollbar In Pure JavaScript – MiniBar

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);

// recalculates scollbar sizes and positions
instance.update();

// destroys the scrollbar
instance.destroy();

Changelog:

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

You Might Be Interested In:


Leave a Reply