Customizable Touch-friendly Scroll Bar – Mora Scrollbars

Category: Javascript | August 16, 2019
1 Comment
Demo Download
Author:SandratraRM
Views Total:1,730 views
Official Page:Go to website
Last Update:August 16, 2019
License:MIT

Preview:

Customizable Touch-friendly Scroll Bar – Mora Scrollbars

Description:

The Mora Scrollbars JavaScript library helps you create customizable, cross-platform scrollbars.

The scrollbars are automatically refreshed when the window is resized or when an element is scrolled.

See also:

Features:

  • Support for arrow buttons.
  • Prev/Next page smooth scrolling when the track is clicked.
  • Ability to fix min height to the handle.
  • Will display the default scrollbar on noscript.
  • Works great on devices with pen/touch support.
  • Disabled on devices with no scrollbars.
  • Works without Jquery.

How to use it:

Add the MoraScrollbar.css to your HTML head before any custom scrollbar styling css:

<head> 
  <link rel="stylesheet" href="/path/to/MoraScrollbar.css">
  <link rel="stylesheet" href="/path/to/theCssWhereYouWantToCustomizeTheScrollbars.css">
</head>

Then you need to include the MoraScrollbar.js in your HTML file.

<script src="/path/to/MoraScrollbar.js"></script>

Give the first element the class msc-wrapper. Then inside the first element, create the second element and give it the class msc-content.

<div class="msc-wrapper">
  <div class="msc-content">
    Your overflowing content! Here you can put anything
  </div>
</div>

Call the MoraScrollbar.refresh() method when:

  • You edit dynamically the content of one of the msc-content’s elements.
  • Adding or removing elements with the msc-wrapper class.
  • You reach any other situation where the scrollbars have an unexpected behavior.
MoraScrollbar.refresh()

Add arrows to the scrollbar.

<div class="msc-wrapper with-arrows">
  <div class="msc-content">
    Your overflowing content! Here you can put anything
  </div>
</div>

Add auto-hide functionality to the scrollbar.

<div class="msc-wrapper with-fading">
  <div class="msc-content">
    Your overflowing content! Here you can put anything
  </div>
</div>

Customize the scrollbar with the following CSS classes:

  • msc-wrapper: the container of the overflowing content and the scrollbar. Think of it like a screen. It has overflow set to hidden so if you want to listen for the scroll in Js, add the listener to the msc-content. Its position is by default absolute (like all of the other classes), you can change it to relative or fixed depending on your needs. Don’t add padding to it. You need to style it to set the positions and dimensions.
  • msc-content: the overflowing content. You can add anything inside of it. It has overflow-y to auto. Don’t modify the width, height, margin, position.
  • msc-scrollbar: the div generated by the MoraScrollbar.js. It is the container of the buttons and the track.
  • msc-track: the track is the part of the scrollbar without the buttons. It contains the handle.
  • msc-handle: this is he handle. You can set its min-height by setting the min-height in css.
  • msc-btn-up , msc-btn-down: The buttons, they are always there but just hidden in css with display none by default. So if you wan’t to make a custom arrowed scrollbar, i advice you to start from the “NormalScrollbar” rather than with “with-arrows” one because you may have an headache trying to change the default values. You just need to arrange the space inside msc-scrollbar for the buttons and the track. The arrow icons are build with css pseudo element ::before and borders. You may need to use pseudo elements to use images or add text.
    The events:
  • using-scroll: added to the msc-wrapper when the scrollbar is used. (You may use it with :hover)
  • disabled: added to the buttons when it can’t be pushed because the scroll is in one of the edges.

Changelog:

08/16/2019

  • Bugfix

See Also:

You Might Be Interested In:

One thought on “Customizable Touch-friendly Scroll Bar – Mora Scrollbars”

Leave a Reply