如何加载Jquery Tiny滚动条
r1n*_*ler 4 html javascript jquery tinyscrollbar
所以我想自定义滚动条,我发现了一个小滚动条,这是一个jquery插件:
http://baijs.nl/tinyscrollbar/
问题是,无论如何我都无法工作.我将Jquery和jquery.tinyscrollbar.js文件包含在与我的html和css相同的文件夹中,并将它们包含在标题部分中,但我无法让它工作......
当我通过客户端打开文件时,我得到的是常规滚动条,如下所示:
这是我的代码:
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;
}
任何帮助将不胜感激!
如官方网站所述,您需要在代码中定义一个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; }
- 我在网站上看不到任何这些信息 - 我可以看到传递各种参数的演示,但没有解释如何实现必要的HTML和CSS修改. (3认同)