Simple Scrollbar

Overview

The Simple Scrollbar jQuery Plugin is a lightweight and customizable solution for adding vertical and horizontal scrollbars to overflowing elements. It provides a clean and easy-to-use interface for enhancing the scrolling experience of your web applications.

Demo

Features.

1. Vertical and Horizontal Scrollbars
2. Customizable appearance
3. Responsive - Automatically adjusts to container size changes
4. Smooth scrolling animation
5. Arrow buttons for navigation
6. Supports click-scrolling, drag-scrolling and touch scrolling
7. Hover effects for a polished user interface
8. Supports touch events

Installation

Include the jQuery library, the Simple Scrollbar plugin and css in your HTML file.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="simple-scrollbar.js"></script>
<link rel="stylesheet" href="sScrollbar.css">

Usage

To initialize Simple Scrollbar on a container element, call the sScrollBar method and pass in an options object:

$(document).ready(function () {
	// Scroll bar will be appearing on all the elements with the given class
	$('.your-container-class').sScrollBar(); 
});

Configuration

Customize the scrollbar appearance and behavior by passing options during initialization:

$('.your-container-class').sScrollBar({
	scrollWidth: 5,            // Scrollbar width
	borderRadius: 3,           // Scrollbar elements border-radius
	railBgColor: "#E1E5E6",    // Scrollbar rail color
	handleBgColor: "#AAA",     // Scrollbar handle color
	scrollBarOpacity: 1,       // Total scrollbar opacity
	railDefaultOpacity: 0.6,   // Scrollbar rail defafult opacity
	handleDefaultOpacity: 0.6, // Scrollbar hand defafult opacity
	railHoverOpacity: 1,       // Scrollbar rail opacity on hover	 
	handleHoverOpacity: 1,     // Scrollbar handle opacity on hover	
	showArrows: true,          // Control scrollbar navigation arrows
	clickScrollRate: 200,      // On click scroll distance
	clickScrollSpeed: 200,     // On click scroll animation speed in millisecond
	arrowScrollRate: 50,       // Arrow click scroll distance
	hOffset: -3,               // Scrollbar spacing from the cotainer
	vOffset: -3,               //Scrollbar spacing from the cotainer
});

Options

Option	Type	Description	Default Value
scrollWidth	Number	Width of the scrollbar.	5
borderRadius	Number	Border radius of the scrollbar.	3
railBgColor	String - hexcode	Background color of the scrollbar rail.	#E1E5E6
handleBgColor	String - hexcode	Background color of the scrollbar handle.	#AAAAAA
scrollBarOpacity	Number (0 to 1)	Opacity of the scrollbar rail.	0.6
railDefaultOpacity:	Number (0 to 1)	Opacity of the scrollbar rail.	0.6
handleDefaultOpacity:	Number (0 to 1)	Opacity of the scrollbar handle.	0.8
railHoverOpacity: :	Number (0 to 1)	Opacity of the scrollbar rail on hover.	0.6
handleHoverOpacity: :	Number (0 to 1)	Opacity of the scrollbar handle on hover.	0.8
showArrows	Boolean	Display arrow buttons.	true
clickScrollRate	Number	Rate of scrolling on click: `pixels`.	200
clickScrollSpeed	Number	Speed of scrolling animation in `millisecond` when clickig on rail.	200
arrowScrollRate	Number	Rate of scrolling using arrow buttons: `pixels`.	50
hOffset	Number	Horizontal scrollbar offset from container in `pixels`.	-2
vOffset	Number	Vertical scrollbar offset from container in `pixels`.	-2

License

This project is licensed under the MIT License - see the LICENSE file for details.