Pure Javascript Simple Custom Scrollbar Plugin with Mouse wheel Option

Category: Layout | October 4, 2018
Javascript Simple Custom Scrollbar Plugin
Author: Mobius1
Official Page: Go to Website
Last Update:March 28, 2019
License:MIT

Are you looking for a lightweight custom scrollbar plugin? What do you think about this vanilla Javascript library? Yep! Its really awesome and work well on mobile devices.

You don’t need Jquery, The Javascript is enough to implement scrollbar on specific div or other HTML elements.

If you need dependency-free scrollbar then this is the best choice for you. It is fully customizable via CSS.

It supports both horizontal and Vertical scroll support. Not only this, but it also works with Textarea.

Another great feature included in this library is allow scrolling with the mouse wheel.

It also allows adding media inside the scroll so you can add photos or videos.

Note: Right now the MiniBar.js is under development and may not suitable for productions so use with care. But you can use Horizontal scrolling without any issue, The Textarea currently in an experimental stage and may not work on all browsers.

How to Use Custom Scrollbar Plugin

The plugin provides files from the CDN which you need to include in the header.

<link href="https://unpkg.com/minibarjs@latest/dist/minibar.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/minibarjs@latest/dist/minibar.min.js" type="text/javascript"></script>

Let’s define HTML which is quite simple. We have to define a container class and then add child elements.

We have to define H3 for heading and child div with class content. The content class also have inner div with class inner.

<div class="container">
    <h3 class="main-title">Default</h3>
    <div class="content">
        <div class="inner">
            <div></div>
        </div>
    </div>
</div>

Initialization the Javascript To Create Mouse Wheel

You can instantiate MiniBar.js plugin by passing a reference to your content area as the first parameter of the constructor as either a DOM node or a CSS3 selector string:

You can also Initialize the MiniBarjs by adding the ID to the container.

new MiniBar(document.getElementById('myContent'));
// or
new MiniBar('#myContent');

You can also define the global options by using theMiniBarOptions object and then define the parameters.

MiniBarOptions = {
    minBarSize: 75,
    alwaysShowBars: true,
    ...
};

You can easily customize the scrollbar by changing the values of properties.

new MiniBar('#myContent',{
  minBarSize: 50,
  barType: "default", // or progress
  alwaysShowBars: false,
  horizontalMouseScroll: "false",
  navButtons: "false",
  scrollAmount: "10",
  containerClass: "mb-container",
  contentClass: "mb-content",
  trackClass: "mb-track",
  barClass: "mb-bar",
  visibleClass: "mb-visible",
  progressClass: "mb-progress"
});

 

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.