Menu
So I want to customize a scrollbar and I found tiny scrollbar, which is a jquery plugin:
http://baijs.nl/tinyscrollbar/
The problem is, I can't get it to work no matter what. I included Jquery, and the jquery.tinyscrollbar.js files into the same folder as my html and css, as well as included them in the header section, but I can't get it to work...
when I open the file via client side, all I get is the regular looking scrollbar as you can see below:
Here's my code:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="scrolltest.css" />
<script src="jquery.js"></script>
<script src="jquery.tinyscrollbar.js"></script>
<script>
$(document).ready(function()
{
$("#chatlist").tinyscrollbar();
});
</script>
</head>
<body>
<div id="chatlist" >
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</body>
</html>
CSS
div#chatlist {
width: 50px;
height: 140px;
border: 1px solid black;
overflow:scroll;
}
Any help would be greatly appreciated!
334
As explained in the official site, you need to define a scrollbar
and a viewport class elements in your code. Try the HTML code below:
<div id="chatlist">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
</div>
And don't forget to amend your CSS as explained in the site too.
#chatlist { width: 520px; clear: both; margin: 20px 0 10px; }
#chatlist .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#chatlist .overview { list-style: none; position: absolute; left: 0; top: 0; }
#chatlist .thumb .end,
#chatlist .thumb { background-color: #003D5D; }
#chatlist .scrollbar { position: relative; float: right; width: 15px; }
#chatlist .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#chatlist .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#chatlist .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#chatlist .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
Using tinyscrollbar actually requires a bit of work. The things you need to do are: 1. You need to define a scrollbar, and a viewport div 2. You need to style them 3. You should get rid of overflow:scroll, as tinyscrollbar does not override the overflow functionality, and you'll get the default scrollbar alongside the tiny one.
This is the code you should use:
<html>
<head>
<link rel="stylesheet" type="text/css" href="scrolltest.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>
<script src="jquery.tinyscrollbar.js"></script>
<script>
$(document).ready(function () {
$("#chatlist").tinyscrollbar();
});
</script>
<style>
#chatlist { width: 50px; height:140px; border:1px solid black; }
#chatlist .viewport { width: 50px; height: 140px; overflow: hidden; position: relative; }
#chatlist .overview { list-style: none; position: absolute; left: 0; top: 0; }
#chatlist .thumb .end,
#chatlist .thumb { background-color: #003D5D; }
#chatlist .scrollbar { position: relative; float: right; width: 15px; }
#chatlist .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#chatlist .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#chatlist .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#chatlist .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
</style>
</head>
<body>
<div id="chatlist" >
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
