Press "Enter" to skip to content

A Lightweight Custom Scrollbar Library In Vanilla Javascript | MiniBar

MiniBar uses the MutationObserver API to automatically detect changes in content so dimensions can be updated. It will only use the API if your browser supports it. If not, then you must call the update method () when adding / removing/updating container content otherwise the slider position and size will be incorrect.

Horizontal scrolling with the mouse wheel and text area support is experimental and may not work in certain browsers.

How to make use of it:

Install the minibar by way of package managers.

# NPM
$ npm install minibarjs

# Bower
$ bower install minibarjs

Import the minibarjs into your undertaking or immediately include the JavaScript and CSS information 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 customized scrollbar within 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 features.

new MiniBar('#myContent',{

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

});

API strategies.

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

Stylish Custom Scrollbar, cross-browser custom scrollbar CSS, MiniBar Plugin/Github


See Demo And Download

Official Website(Mobius1): Click Here

This superior jQuery/javascript plugin is developed by Mobius1. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.