Simulate Horizontal And Vertical Scrollbars - jQuery abScrollBar

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

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,
});

This awesome jQuery plugin is developed by xiaomingmm. For more Advanced Usages, please check the demo page or visit the official website.