In web design, customizing scrollbars is a subtle yet important element to enhance user experience.
In this article, we will dive deep into how to design scrollbars freely using jquery.slimscroll.js.
By using this library, you can adjust the default scrollbar to match your site’s design.
Customizing scrollbars can be tricky, right?
I often wonder if the effort to match scrollbar design is really worth it and whether it’s truly necessary.
What is jquery.slimscroll.js?
jquery.slimscroll.js is a jQuery plugin that allows you to beautifully customize vertical or horizontal scrollbars.
The default scrollbar is functional but limited in design. However, by using jquery.slimscroll.js, you can finely configure the scrollbar’s width, height, color, transparency, and more, and incorporate it as part of the design.
CSS Setup
First, let’s configure the basic styles with CSS.
The CSS below sets the background color and text color of the entire page, as well as the frame (divwrap) for displaying the demo.
<style>
html, body {
margin: 0;
background-color: #000000;
}
h1{
text-align: center;
font-size: 20px;
padding: 50px 0;
position: absolute;
width: 100%;
color: #ffffff;
position: relative;
}
.divwrap {
border-radius: 10px;
background: #fff;
width: 800px;
padding: 20px 20px 50px 20px;
margin: 0 auto;
border:1px solid #000;
}
p {
margin: 10px 0;
font-size: 16px;
line-height: 1.6em;
}
hr{
color: #cccccc;
margin: 50px 0;
}
</style>
Setting the HTML Structure
Next, set up the HTML structure where the customized scrollbar will be applied.
In the following example, we create demo areas with three different styles of scrollbars.
Three patterns of customized scrollbar areas are provided (id=”demo1″, id=”demo2″, id=”demo3″).
<h1>Display customized scrollbar design using jquery.slimscroll.js</h1>
<div class="divwrap">
<div id="demo1">
<p>A scrollbar with customized design is displayed on the right.A scrollbar with customized design is displayed on the right.A scrollbar with customized design is displayed on the right.A scrollbar with customized design is displayed on the right.A scrollbar with customized design is displayed on the right.A scrollbar with customized design is displayed on the right.A scrollbar with customized design is displayed on the right.A scrollbar with customized design is displayed on the right.A scrollbar with customized design is displayed on the right.A scrollbar with customized design is displayed on the right...</p>
</div>
<hr>
<div id="demo2">
<p>A scrollbar with customized design is displayed on the left.A scrollbar with customized design is displayed on the left.A scrollbar with customized design is displayed on the left.A scrollbar with customized design is displayed on the left.A scrollbar with customized design is displayed on the left.A scrollbar with customized design is displayed on the left.A scrollbar with customized design is displayed on the left.A scrollbar with customized design is displayed on the left.A scrollbar with customized design is displayed on the left.A scrollbar with customized design is displayed on the left.A scrollbar with customized design is displayed on the left...</p>
</div>
<hr>
<div id="demo3">
<p>A scrollbar with customized design and color is displayed on the right.A scrollbar with customized design and color is displayed on the right.A scrollbar with customized design and color is displayed on the right.A scrollbar with customized design and color is displayed on the right.A scrollbar with customized design and color is displayed on the right.A scrollbar with customized design and color is displayed on the right.A scrollbar with customized design and color is displayed on the right.A scrollbar with customized design and color is displayed on the right.A scrollbar with customized design and color is displayed on the right...</p>
</div>
</div>
JavaScript Configuration
The JavaScript setup using jquery.slimscroll.js looks like this.
For each demo area, options such as scrollbar position and color are specified.
Load jquery.min.js (v1.9 series) and jquery.slimscroll.js files.
Here are three examples: a customized scrollbar on the right (#demo1), a customized scrollbar on the left (#demo2), and a customized scrollbar with color on the right (#demo3).
Use $(‘scrollbar display area’).slimscroll({options}). Options allow adjustments of bar width, position, height, color, transparency, etc.
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.slimscroll.js"></script>
<script type="text/javascript">
$(function(){
$('#demo1').slimscroll({
size: '15px'
});
$('#demo2').slimScroll({
position: 'left'
});
$('#demo3').slimScroll({
color: '#00f'
});
});
</script>
Demo Page: Customizing Scrollbars with jquery.slimscroll.js
You can check the demo page with customized scrollbars from the link below.
Demo page customizing scrollbar design with jquery.slimscroll.js
Source: jQuery-slimScroll
Conclusion
Customizing scrollbars is one way to provide visitors with a pleasant browsing experience by paying attention to design details.
jquery.slimscroll.js is a very effective tool for achieving this and will be valuable for web designers and front-end developers.
To maintain design consistency and improve usability, it is highly recommended to incorporate it actively.
※ Please use at your own risk if reusing.
Do not copy the Google Analytics tag inside the demo page’s head tag.
