Simulate Horizontal And Vertical Scrollbars - jQuery abScrollBar
File Size: | 19.9 KB |
---|---|
Views Total: | 576 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The jQuery abScrollBar plugin allows you to add a scrollbar-like appearance to any div container on your web page.
This plugin works with containers whose content is too long or wide to be visible inside their container. Just like a "real" scrollbar, the abScrollBar can be scrolled vertically (up and down) and/or horizontally (left and right).
More Features:
- Custom scrollbar styles.
- Auto show/hide on mouse enter/leave.
- Custom mousehwheel step.
See Also:
How to use it:
1. Download and put the abScrollBar jQuery plugin at the bottom of the webpage.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.abScrollBar.min.js"></script>
2. Initialize the plugin and attach a vertical scrollbar to the target container.
<div class="content"> Your Content Here </div>
abScrollBar({ contentEl: ".content", barClass: "bar", barBgClass: "bar-bg", width: 320, height: 400, });
/* custom scrollbar styles */ .abScrollBar-box .bar-bg { background:#fafafa; } .abScrollBar-box .bar { background:#4ad585; }
3. Create a horizontal scrollbar instead.
abScrollBar({ contentEl: ".content", barClass: "bar", barBgClass: "bar-bg", scrollType: "x", width: 560, height: 125, });
4. Set the height & width of the custom scrollbar.
abScrollBar({ barWidth: 6, barHeight: 6, });
5. Determine whether to auto show/hide the scrollbar. Default: false.
abScrollBar({ isHideBar: true, });
6. Set the mousewheel step. Default: 30.
abScrollBar({ mousewheelStep: 50, });
7. Customize the scrolling speed. Default: 350.
abScrollBar({ speed: 500, });
Changelog:
2023-04-08
- Code optimized
This awesome jQuery plugin is developed by xiaomingmm. For more Advanced Usages, please check the demo page or visit the official website.