custom srollbar div - Download Create Custom Scrollbars Using DIV Element - jQuery scrollBar.js

Download Create Custom Scrollbars Using DIV Element – jQuery scrollBar.js

By Posted on

This time I will share jQuery Plugin and tutorial about Create Custom Scrollbars Using DIV Element – jQuery scrollBar.js, hope it will help you in programming stack.

custom srollbar div - Download Create Custom Scrollbars Using DIV Element - jQuery scrollBar.js
File Size: 5.8 KB
Views Total: 2488
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

scrollBar.js is a jQuery plugin to create custom scrollbars by using the DIV’s scroll and drag’n’drop events. You can easily customize the scrollbar by changing the style of the DIV. Supports both horizontal and vertical scrollbars.

How to use it:

1. Insert the main JavaScript scrollBar.js after the latest jQuery library.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous">
4 </script>
5 <script src="js/scrollBar.js"></script>

2. Attach the plugin to a DIV container you specify.

view source
1 <div class="scrollBox" id="box">
2   <div class="contentBox">
3     Long Content Here
4   </div>
5 </div>
view source
1 $(function(){
2  
3   $(".scrollBox").scrollBar();
4  
5 });

3. The example CSS for the custom scrollbar.

view source
01 .zl-scrollBarBox{
02   height:100%;
03   position:absolute;
04   background:#f3f3f3;
05 }
06  
07 .zl-scrollBar{
08   position:absolute;
09   left:0;
10   top:0;
11   background:#848484;
12   transition:background 0.3s;
13 }
14  
15 .zl-scrollBar.zl-verticalBar{
16   min-height:10px;
17 }
18  
19 .zl-scrollBar.zl-horizontalBar{
20   min-width:10px;
21 }
22  
23 .zl-scrollBar:hover{
24   background:#000;
25 }
26  
27 .zl-scrollContentDiv{
28   position:relative !important;
29   width:100% !important;
30   height:100% !important;
31   padding:0 !important;
32   margin:0 !important;
33   top:0;
34   left:0;
35 }

4. Set the width of the scrollbar. Default: 5px.

view source
1 $(function(){
2  
3   $(".scrollBox").scrollBar({
4     barWidth: 10
5   });
6  
7 });

5. Enable/disable horizontal and vertical scrollbars.

view source
1 $(function(){
2  
3   $(".scrollBox").scrollBar({
4     position:"x,y"
5   });
6  
7 });

6. Set the distance to scroll on each wheel. Default: 15px.

view source
1 $(function(){
2  
3   $(".scrollBox").scrollBar({
4     wheelDis: 25
5   });
6  
7 });

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

source : jquery.net

Related posts: