所以我想自定义一个滚动条，我发现了一个微小的滚动条，这是一个jquery插件:
http://baijs.nl/tinyscrollbar/
问题是，无论如何我都无法让它工作。我将 Jquery 和 jquery.tinyscrollbar.js 文件包含在与我的 html 和 css 相同的文件夹中，并将它们包含在 header 部分中，但我无法让它工作...
当我通过客户端打开文件时，我得到的只是外观正常的滚动条，如下所示:
这是我的代码:
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;
}
如有任何帮助，我们将不胜感激!
最佳答案
如 official site 中所述, 你需要定义一个 滚动条
和 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; }
关于javascript - 如何加载Jquery Tiny滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14546252/