How to load Jquery Tiny scrollbar

html, javascript, jquery, tinyscrollbar

Solution

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; }

Problem

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!

Original source