Home/ Questions/Q 9204861
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T23:48:47+00:00

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

  • 0

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:

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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