A zero dependency Javascript scrollbar.
See also the demo/index.html file in your browser
- Easy to use
- Very smooth
- Fully customizable scrollbars
- Support touchscreen desktop
- Disabled on devices with no scrollbars
- Ability to add arrow buttons
- Runs without JQuery
- Works on all major browsers
First of all you need to add the ./js/MoraScrollbar.js and the ./css/MoraScrollbar.css files in your html head.
<head>
<!-- Other head's stuffs -->
<link rel="stylesheet" href="/path/to/MoraScrollbar.css">
<script src="/path/to/MoraScrollbar.js"></script>
<!-- Put your main stylesheet after the scrollbar.css if you want to apply custom styles-->
</head>You can of course merge the content of the scrollbar.css with your main stylesheet and edit directly the default styles.
Now, to actually use your custom scrollbars, you need two elements. Usually two <div>.
Then give them respectively the class msc-wrapper and msc-content.
<div class="msc-wrapper">
<div class="msc-content">
Your overflowing content
</div>
</div>Add
with-arrowsto the wrapper element to display the arrows.
Default styles are already set in the ./css/MoraScrollbar.css stylesheet, but you can change them as you need.
Just look at
demo/index.html#customto see how to customize your scrollbars.
The plugin works fine until:
-
New elements with custom scrollbars are added dynamically with Javascript
-
The content of the
msc-contenthas changed
To fix this, when you reach one of these situation, just call the MoraScrollbar.refresh() method.
- Support for horizontal scrollbars
- Theme packs
- PHP Mora framework : A PHP Framework made by myself.