There are quite a lot of jQuery plugins for scrollbar. I find this jQuery NiceScroll Plugin is quite user friendly so i want to share it to you guys.
1. Download the jQuery NiceScroll Plugin file to your webroot js folder from GitHub or Google Code.
2. Create the following index.html.
<html>
<head>
<title>Eureka! - jQuery NiceScroll Plugin</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="./js/jquery.nicescroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#scroll-area').niceScroll({
autohidemode: 'false', // Do not hide scrollbar when mouse out
cursorborderradius: '0px', // Scroll cursor radius
background: '#E5E9E7', // The scrollbar rail color
cursorwidth: '10px', // Scroll cursor width
cursorcolor: '#999999' // Scroll cursor color
});
});
</script>
<style type="text/css">
#scroll-area {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="scroll-area">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra facilisis lacus, sed dignissim urna pharetra consectetur. Integer eget imperdiet augue. Mauris nec elit augue, ac condimentum dolor. Proin eget enim et massa dignissim elementum et vitae augue. Morbi adipiscing imperdiet ligula, non porttitor nisi varius nec. Fusce vehicula venenatis faucibus. Nulla tincidunt tristique turpis, sollicitudin semper lectus vehicula lobortis.
</div>
</body>
</html>
3. Check it out.
Done =)
Reference: jQuery NiceScroll Plugin
Advertisements
Fucking hot tips ……………….
LikeLike