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.

  • Fully customizable via CSS
  • Native scrolling behavior preserved
  • Vertical and horizontal scroll support
  • Textarea support
  • Horizontal scrolling with mousewheel

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

Options

hideBars (v0.4.0 and above)

Type: Boolean

Default: false

When set to true the scrollbars will be hidden.

minBarSize

Type: Integer

Default: 50

Sets the minimum size of the scrollbars. This can prevent the scrollbar from becoming too small when you have a ton of content.

alwaysShowBars

Type: Boolean

Default: false

By default, the scrollbars aren’t visible until hovering over the content. Set this to true keep the scrollbars visible at all times.

barType

Type: String

Default: default

Set to progress to display the scrollbars as progress bars.

observableItems (v0.4.0 and above)

Type: Mixed

Default: false

Allows MiniBar to observe Descendents and determine whether they’re fully or partially visible within the scrolling container or completely out of view.

To use you must pass a CSS3 selector string of the scrolling container Descendents that you want to monitor. When monitored, each descendant will have an className added depending on its visibility:

  • .mb-item-visible – item boundaries are completely within the scrolling container.
  • .mb-item-partial – item is visible, but its boundaries are not completely within the scrolling container.
  • .mb-item-hidden – item is not visible.

NOTE: Your browser must support the IntersectionObserver API for this to work. The only code run in its callback is the className changes, so latency is kept to a minimum.

horizontalMouseScroll

Type: Boolean

Default: false

Allow horizontal scrolling with the mousewheel.

navButtons

Type: Object

Default: false

Enable scrollbars with navigation buttons.

scrollAmount

Type: Integer

Default: 10

Increase or decrease the amount scrolled when clicking a nav button.

wheelScrollAmount

Type: Integer

Default: 100

Increase or decrease the amount scrolled when rolling the mouse wheel.

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 Usage, please go to the official website.

Share