In this article, I will show you how to display a custom scrollbar using jquery.tinyscrollbar.js.
CSS for Displaying a Custom Scrollbar Using jquery.tinyscrollbar.js
Below is the CSS code for the custom scrollbar (#scrollbar1). Please modify it as needed.
<style type="text/css">
<!--
body{
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.6em;
text-align:center;
padding:15px 0;
}
#idWrap{
width:800px;
margin:0 auto;
text-align:left;
}
h2{
font-size:16px;
font-weight:normal;
line-height:1.6em;
}
p{
line-height:1.4em;
font-size:14px;
}
/* Tiny Scrollbar */
#scrollbar1 { width: 520px; margin: 20px auto 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbar1 .scrollbar{ background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar1 .track { background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#scrollbar1 .thumb .end { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar1 .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
-->
</style>
JavaScript for Displaying a Custom Scrollbar Using jquery.tinyscrollbar.js
Include the jquery.min.js and jquery.tinyscrollbar.min.js files. Then, apply the scrollbar to the area (#scrollbar1) using $(‘#scrollbar1’).tinyscrollbar().
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
HTML for Displaying a Custom Scrollbar
Set the scrollbar (class=”scrollbar”) and the content area (class=”viewport”) in the custom scrollbar area (id=”scrollbar1″).
<div id="idWrap">
<h1>Displaying a Custom Scrollbar Below</h1>
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<h2>“DAD UNION” is a web technology media with the theme of “making life easier for fathers.”</h2>
<p>Eventually, we hope to create a union of dads to claim "we are doing our best too" and aim to slightly raise the value of fathers.</p>
<p>I work as an engineer at a web production company. The work I do is quite varied, and I often find myself questioning the term "web engineer." I regularly handle design, production, operation, and more.</p>
<p>The image of a web engineer is often seen as someone who makes invisible things work well and is knowledgeable about computers. Many people outside the industry do not understand this role well. Here, I will share some of the work-related technical notes and self-praise-worthy content that I have created during production.</p>
</div>
</div><!--/viewport-->
</div><!--/scrollbar1-->
</div>
Demo Page for Displaying a Custom Scrollbar Using jquery.tinyscrollbar
Demo Page for Displaying a Custom Scrollbar Using jquery.tinyscrollbar
Source：Tiny Scrollbar: A lightweight jQuery plugin
Source：Tiny Scrollbar: A lightweight jQuery plugin
Customizing the scrollbar is great, but if it causes any system or operational issues, it is necessary to test it on different devices and browsers.
※ Please use this at your own risk.
Do not reuse the Google Analytics tag within the demo page tag.
