Mora Scrollbars

Welcome in the Mora Scrollbars guide!

Introduction

One problem any web designer will face up one day will be setting overflow to auto and then finding out that the default scrollbar is just to ugly for the design.
Most of the time, designers choose to sacrifice their creativity to stick to a "scrollbar-friendly" design, just because there isn't a decent, cross-browser, way to style that damn scrollbar.

I know that there are already many scrollbar libraries out there but just because CocaCola exists does'nt mean Pepsi can't!

What does mora scrollbars have more than others?

  • -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.

Other scrollbar libraries will possibly:

  • -Not have the arrow buttons included.
  • -Not allow you to scroll with an other way than the scrollbar.
  • -Not allow you to set a min height to the handle.
  • -Not work on touchscreen desktops that still have ugly scrollbars.
  • -Hard to find when hidden. (Like the facebook ones...well, you can optimize these on the css but I've set a better default behavior for you)
  • -Kill the element functionality if the Javascript is disabled. (You won't be able to scroll that DIV anymore)
  • -Mess with the event listeners. (You gonna add a window.onmousemove...and then: damn, why it is not working after i scrolled?)
  • -Require Jquery. (This could be a problem if for some reasons, you can't use Jquery)
  • -Won't work well if you are applying some crazy transformation effect (rotate or skew) to the scrollbar or its parent. (But mine too so this is your fault, a scrollbar must be either horizontal or vertical) (Workaround: you can rotate your whole monitor)

Because a good developper must assume that the next developper may be an absolute beginner and the end-user could be as smart as a stone ;)

Those are the "reasons" why i made this simple yet, but powerfull Javascript plugin that talks about scrollbars.

What does Mora mean?

This is the Malagasy word for easy...or also cheap, but for now, it's EASY, ok?
Yeah, i'm living in Madagascar and I like to move it ... with my Scrollbar!

I just hope you will like it, because it is not for me, but for You. (Of course, only if you need a good design).

Getting started

Enough talk, let's start using it!

So like any library, you need to download it. (Currently, there is no CDN version)

When you got all the files, 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, i don't really know where, depending on your habitudes.
We just need to find <script src="/path/to/MoraScrollbar.js"></script> in your html.

Ok, it is working now, but we don't have any element that wants to have a mora scrollbar yet...
For that, we need two elements, usually two div's...Of course, i could have done it with one element but we want the default scrollbar to display if the JavaScript is blocked so we need two elements (Good compatibility means extra-steps...and as a bonus, the JavaScript engine has job in less!).

Give the first element the class "msc-wrapper". Then inside the first element, create the second element and give it the class "msc-content". Don't add anything else, expect comments, inside the wrapper.

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

Now, because the wrapper default position is set to absolute, you must set its width and height with css. (Think about giving it an id)

And that's all you need to do to activate the scrollbar!

Tip :Check the Tutorials/NormalScrollbar.html file for the minimal example code. The file will output this:

How it works?

Well, that was pretty easy but you may want to know how it is working right?

So first of all, there is a Js class named Mora_Scrollbar inside the MoraScrollbar.js file that does all the magic.
It is instanciated in the MoraScrollbar variable when the window has loaded.
Then, the MoraScrollbar.refresh() method is called.

The refresh method:

  • -Checks if the browser has scrollbars and then hides them.
  • -Checks for elements with the class "msc-wrapper" that does'nt have the scrollbars yet.
  • -Adding the scrollbars to them: the scrollbar is a just div with the class "msc-scrollbar". It contains the track element with the class "msc-track" which in turns contains the handle button with the class "msc-handle".The scrollbar element also contains 2 button elements with respectively the classes "msc-btn-up" for the up button and "msc-btn-down" for the down button.

Tip :Just inspect the page and look for the div with msc-scrollbar class.


Note :The scrollbars are automatically refreshed when the window is resized or when an element is scrolled but you need to manually 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.

Default styles

The MoraScrollbar.css file contains the default styling of all of the mora scrollbar css classes.

There are 3 default scrollbars styles ready for use.

The "default" scrollbar: It looks like the facebook ones.

The arrowed scrollbar: Add the class "with-arrows" to the msc-wrapper.
    <div class="msc-wrapper with-arrows">

The fading scrollbar: Add the class "with-fading" to the msc-wrapper.
    <div class="msc-wrapper with-fading">

Tip : You can also combine the "with-arrows" and "with-fading" to get a fading arrowed scrollbar.

Custom styling

You may directly like the "default" ones but you may also want to make your owns. So this section will guide you on the basis of styling the scrollbars.

First of all, the key is knowing css, all of these scrollbars are styled by css. The job of the Js is just adding the elements to the html but for the display, it's all for css.
We are going to start from the normal scrollbar and trying to change the colors and add a border.
Follow the "NormalScrollbar" steps, add an id to the wrapper, for example MyScrollbar. Then in your css, add:

#MyScrollbar .msc-content{
  • padding: 20px;
}
#MyScrollbar .msc-handle{
  • background: rgb(26, 173, 184);
}
#MyScrollbar .msc-track{
  • background: rgb(222, 242, 255);
  • border: 1px solid transparent;
}
#MyScrollbar .msc-scrollbar{
  • border: 2px solid rgb(16, 136, 145);
  • width: 14px;
  • border-radius:7px;
}

It will look like this:

As you can see, you just have to style the classes.

Below you will see all the classes lists and their description.

List of classes

We have maybe seen all of them above but at different places so here we will gather them.

The elements:

  • 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.

About me

So maybe you already know who I am depending of where did you come to that page. Or maybe not, so in short : My name is RAMBELOSON Mendrika Sandratra. I'm a 19 years Malagasy Informatic student. I'm currently preparing my License.

  • You can read more on my website if you speak french.
  • You can add me on Facebook too.
  • Or check my Github page.

See also

The php framework mora on Github: Use 'composer create-project mora/mora project name' to use it.