问题:

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

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!

回答1:

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

回答2:

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>

转载请标明出处:How to load Jquery Tiny scrollbar

文章来源: How to load Jquery Tiny scrollbar

标签

jquery

position