Updated April 6, 2023
Introduction to jQuery scrollbar
The jQuery scrollbar is one of the jQuery library plugins that can be used for to create custom scrollbars with the help of some html elements like div. Additionally, the div tag used as the scroll role for drag and drop events and its easily customizes for while changing the div tag styles. It is also applicable for the scroll events that occur when the user is scrolled as the specified tag elements; it also works on the scroll events for scrollable elements whenever it is triggered or to run the scroll event occurs on the script.
Syntax:
In jQuery library has many features like methods, keywords for creating web pages depend on the requirement. The plugin feature is additionally added on the jQuery library for creating the web application in more sophisticated. In HTML, UI tag elements are combined with the jQuery methods for calling and passing the html tags as the parameter.
<html>
<head>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js">
</script>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
$(document).ready(function(){
$("selector").click(function(){
$("#selector").jqxScrollBar({height, weight});
------some jQuery script codes depends upon the requirement---
}
</script>
</head>
<body>
----html tag elements and the UI logic elements used on the front end---
</body>
</html>The above codes are the basic syntax for utilizing the scrollbar packages on the script and called the code’s js packages.
How to create a scrollbar in jQuery?
The scrollbar.js is one of the jQuery plugins, and the packages are used to create the customized scrollbars by using the div’s scroll and other default tag elements, which depends on the html codes and the UI. With these plugins’ help, we can call and utilized the methods and classes wherever it is needed and required by the user. These can be achieved by both CSS-like style-sheets and other presentation areas. We can also call these on the effects like animation, images, videos, etc. The scroll bars are supported for both horizontal and vertical type the perfect and actual scrollbars it may not be the perfect webkit-scrollbars the packages are covered and supported with other elements like button, thumb, track, track-piece, corner, and resizer selectors, which may be required on the script.
The plugins called and utilized these bars wherever it needs. The webkit is one of the browsers that can be used on the pseudo-elements, and these are too customized the browser’s scrollbars on the web-based applications. And the scrollbar features are resized and dragged on the event handler mechanism, which the user held when they called or triggered the particular operations on the script.
Examples of jQuery scrollbar
Here are the following examples mention below
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Welcome to My Domain it’s a first example for utilising the scrollbar packages on the script </title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#first").jqxScrollBar({ width: 303, height: 24 });
$("#second").jqxScrollBar({ width: 23, height: 105, vertical: true });
$("#first").bind('example', function (event) {
$('#demo1').html('demo1 (' + parseInt(event.currentValue) + ')');
});
$("#second").bind('example', function (event) {
$('#demo2').html('demo2 (' + parseInt(event.currentValue) + ')');
});
});
</script>
</head>
<body class='demo' bgcolor=”red”>
<div id='demo2' style='margin-top: 17px;'>
<ul>The scroll bar here we used the vertical option for inserting the data elements on the script
<li>
one</li>
<li> two </li>
</ul>
</div>
<div style='margin-top: 17px;' id='second'>
</div>
<div id='demo1' style='margin-top: 17px;'>
<ul>
The scroll bar here we used the horizontal option for inserting the data elements on the script
<li>
three</li>
<li> four </li>
<li> five </li>
</ul></div>
<div style='margin-top: 17px;' id='first'>
</div>
</body>
</html>Sample Output:
In the above example, we used jQuery scrollbar js are added as the CDN, and we used the <div> tag contents on the web page scrollbar option.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To My Domain its a Second Example for regarding the jQuery Scrollbar
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
(function($){
$('.second').perfectScrollbar();
});
</script>
<style>
.second {
width: 475px;
height: 342px;
margin: 75px auto 0 auto;
position: relative;
overflow: auto;
}
.third {
background: url('www.google.com') top left no-repeat;
width: 1048px;
height: 980px;
}
</style>
</head>
<body bgcolor="green">
<div class="second">
<div class="third">
Welcome To My Domain ist a second example for creating the web page by using the jQuery plugin called ScrollbarWelcome To My Domain ist a second example for creating the web page by using the jQuery plugin called ScrollbarWelcome To My Domain ist a second example for creating the web page by using the jQuery plugin called Scrollbar
Welcome To My Domain ist a second eaxmple for creating the web page by using the jQuery plugin called ScrollbarWelcome To My Domain ist a second eaxmple for creating the web page by using the jQuery plugin called ScrollbarWelcome To My Domain ist a second eaxmple for creating the web page by using the jQuery plugin called ScrollbarWelcome To My Domain ist a second eaxmple for creating the web page by using the jQuery plugin called Scrollbar
</div>
</div>
</body>
</html>Sample Output:
In the second example, we used the scrollbar on the <div> tag, and it places in the center position of the web page.
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>
$(window).scroll(function() {
var $vars = $(window).scrollTop();
if($vars > 0) {
$('#first').addClass('new');
} else {
$('#first').removeClass('new');
}});
</script>
<style>
#first {
position: scroll;
top: 2;
left: 1;
width: 133%;
margin-bottom: 7px;
height: 95px;
line-height: 94px;
background-color: blue;
}
#first li {
margin: 1;
padding: 1;
float: center;
}
#first.new {
height: 33px;
background-color: pink;
}
</style>
</head>
<body bgcolor="green">
<header id="first">
<nav>
<ul>
<div class="new" align="center">Welcome Users</div>
</ul>
</nav>
</header>
<a href="first">first</a><br>
<a href="second">second</a><br>
<a href="third">third</a><br>
<a href="four">four</a><br>
<a href="five">five</a><br>
<a href="six">six</a><br>
<a href="seven">seven</a><br>
<a href="eight">eight</a><br>
<a href="nine">nine</a><br>
<a href="ten">ten</a><br>
<a href="11">11</a><br>
<a href="12">12</a><br>
<a href="13">13</a><br>
<a href="14">14</a><br>
<a href="15">15</a><br>
<a href="16">16</a><br>
<a href="17">17</a><br>
<a href="18">18</a><br>
<a href="19">19</a><br>
<a href="20">20</a><br>
<a href="21">21</a><br>
<a href="22">22</a><br>
<a href="23">23</a><br>
<a href="24">24</a><br>
<a href="25">25</a><br>
<a href="26">26</a><br>
<a href="27">27</a><br>
<a href="28">28</a><br>
<a href="29">29</a><br>
<a href="30">30</a><br>
<a href="31">31</a><br>
<a href="32">32</a><br>
<a href="33">33</a><br>
<a href="34">34</a><br>
<a href="35">35</a><br>
<a href="36">36</a><br>
<a href="37">37</a><br>
<a href="38">38</a><br>
<a href="39">39</a><br>
<a href="40">40</a><br>
<a href="41">41</a><br>
<a href="42">42</a><br>
</body>
</html>Sample Output:
In the final example, we used the scrollbar on the web page itself, and after scrolling the page, the datas and the header panel will change the color.
Conclusion
In conclusion, jQuery library, along with the different set of widgets and plugins, create the web-based application on designing the UI front end and the user-friendly nature. The plugins supported some of the browsers, and we need to download the js or configure the CDN path to the script.
Recommended Articles
This is a guide to the jQuery scrollbar. Here we discuss How to create a scrollbar in jQuery along with the examples and outputs. You may also have a look at the following articles to learn more –
