Easy Styleable jQuery Custom Scrollbar Plugin - Simplescroll
File Size: | 5.46 KB |
---|---|
Views Total: | 985 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Simplescroll is a tiny jQuery plugin used for generating an easy-to-style custom scroll bar which can be positioned anywhere within your scrollable container.
How to use it:
1. Wrap your long content into a DIV container and specify the position of the custom scrollbar using data-simplescroll
attribute like this:
<div id="demo" data-simplescroll="top|right"> ... </div>
2. Make the DIV container scrollable in the CSS.
#demo { overflow-x: hidden; overflow-y: scroll; width: 500px; height: 200px; padding: 1em 2em; }
3. Place the latest version of jQuery and jQuery Simplescroll's script at the bottom of the webpage.
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="jquery.simplescroll.js"></script>
4. Call the plugin on the scrollable container and done.
$("div").simplescroll();
5. Apply your own styles to the scrollbar's track, handle and corner.
.ss-track { ... } .ss-track-x { ... } .ss-track-y { ... } .ss-handle { ... } .ss-handle-x { ... } .ss-handle-y { ... } .ss-corner { ... }
This awesome jQuery plugin is developed by literallylara. For more Advanced Usages, please check the demo page or visit the official website.