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:

• 10 Best Custom Scroll Bar Plugins In jQuery And Vanilla JS

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.