Skip to content

shyam3089/Simple-ScrollBar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.