Simple Yet Robust Scrollbar Plugin - jQuery sScrollBar
File Size: | 12.3 KB |
---|---|
Views Total: | 288 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple and highly customizable scrollbar jQuery plugin designed to provide an easy-to-implement upgrade over the native browser scrollbar. Supports both horizontal and vertical scrollbars.
Its responsive sizing automatically adjusts the scrollbars to fit containers that change size. This makes the plugin useful for scrollable elements that resize with responsive layouts.
The customizable appearance options allow matching the scrollbars' style to your site's design. You can set custom colors, opacity levels, borders, and other attributes.
Simple Scrollbar works well on text-heavy pages like blogs, guides, docs, and long articles where native scrollbars lack usability.
See Also:
How to use it:
1. Download the simple scroll bar plugin and add the following files to the webpage.
<!-- jQuery is required --> <script src="/path/to/cdn/jquery.slim.min.js"></script> <!-- jQuery sScrollBar Plugin --> <link rel="stylesheet" href="/css/sScrollBar.css"> <script src="/js/simpleScrollBar.js" ></script>
2. Call the function sScrollBar
on the scrollable content and the plugin will do the rest.
<div class="container"> ... </div>
$(".container").sScrollBar({ // options here });
3. Override the default options to customize the scrollbar.
$(".container").sScrollBar({ // width in px scrollWidth: 5, // border-radius in px borderRadius: 3, // background colors railBgColor: "#E1E5E6", handleBgColor: "#AAA", // opacity from 0 to 1 scrollBarOpacity: 1, railDefaultOpacity: 0.6, handleDefaultOpacity: 0.6, railHoverOpacity: 1, handleHoverOpacity: 1, // show arrows showArrows: true, // for click to scroll clickScrollRate: 200, clickScrollSpeed: 200, // for arrow click scroll arrowScrollRate: 50, // horizontal/vertical offsets hOffset: -3, vOffset: -3, // enable RTL(right to left) mode rtl: true });
This awesome jQuery plugin is developed by shyam3089. For more Advanced Usages, please check the demo page or visit the official website.