如何加载Jquery Tiny滚动条 [英] How to load Jquery Tiny scrollbar
问题描述
所以我想自定义滚动条，我发现了一个小滚动条，这是一个jquery插件：
所述，您需要定义滚动条以及代码中的
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;明确：两者;保证金：20px 0 10px; }
#chatlist .viewport {width：500px;身高：200px;溢出：隐藏;位置：相对; }
#chatlist .overview {list-style：none;位置：绝对;左：0;顶部：0; }
#chatlist .thumb .end，
#chatlist .thumb {background-color：＃003D5D; }
#chatlist .scrollbar {position：relative;漂浮：对;宽度：15px; }
#chatlist .track {background-color：＃D8EEFD;身高：100％;宽度：13像素;位置：相对;填充：0 1px; }
#chatlist .thumb {height：20px;宽度：13px;游标：指针;溢出：隐藏;位置：绝对;顶部：0; }
#chatlist .thumb .end {overflow：hidden;身高：5px;宽度：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; }
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:
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!
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; }
这篇关于如何加载Jquery Tiny滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
