Geek Answers Handbook

How to load Jquery Tiny scrollbar

So, I want to customize the scrollbar, and I found a tiny scrollbar, which is a jquery plugin:

http://baijs.nl/tinyscrollbar/

The problem is that I can not make it work no matter what. I included jQuery and jquery.tinyscrollbar.js files in the same folder as my html and css, and also included them in the header section, but I can't get it to work ...

when I open the file from the client side, all I get is the usual search scrollbar, as you can see below:

enter image description here Here is 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!

+4
source share
2 answers

As explained on the official website, you need to define the elements of the scrollbar and viewport class in your code. Try the HTML 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 make changes to your CSS as described on the site.

 #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; }
+9
source

Using tinyscrollbar actually requires some work. What you need to do is: 1. You need to determine the scroll bar and div of the viewport 2. You need to style them 3. You should get rid of overflow: scrolling, since tinyscrollbar does not override the overflow functionality, and you will get a scroll bar by default next to tiny.

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>
+4
source

More articles:


All Articles