Question

所以我想自定义滚动条，我发现了一个小滚动条，这是一个jquery插件：

问题是，无论如何我都无法工作。我将Jquery和jquery.tinyscrollbar.js文件包含在与我的html和css相同的文件夹中，并将它们包含在标题部分中，但我无法让它工作......

当我通过客户端打开文件时，我得到的是常规滚动条，如下所示：

enter image description here 这是我的代码：

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

非常感谢任何帮助！

Answer 1

正如official site中所述，您需要在代码中定义scrollbar和viewport类元素。请尝试下面的HTML代码：

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

并且不要忘记按照网站中的说明修改CSS。

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

Answer 2

使用tinyscrollbar实际上需要一些工作。你需要做的事情是： 1.您需要定义滚动条和视口div 你需要设计它们的风格 3.你应该摆脱溢出：滚动，因为tinyscrollbar不会覆盖溢出功能，你将获得默认的滚动条和小的滚动条。

这是你应该使用的代码：

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

如何加载Jquery Tiny滚动条

2 个答案: