Simple Yet Robust Scrollbar Plugin - jQuery sScrollBar

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:

• 10 Best Custom Scrollbar Plugins In jQuery And Vanilla JS

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.