Stylish Custom Scrollbar In Pure JavaScript – MiniBar

Category: Javascript , Recommended | September 16, 2018
Author: Mobius1
Views Total: 1,177
Official Page: Go to website
Last Update: September 16, 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. 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',{
  barType: "default", // or progress
  minBarSize: 10,
  alwaysShowBars: false,

  containerClass: "mb-container",
  contentClass: "mb-content",
  trackClass: "mb-track",
  barClass: "mb-bar",
  visibleClass: "mb-visible",
  progressClass: "mb-progress"
});

Changelog:

09/16/2018

  • v0.2.2

Leave a Reply