javascript 如何加载 Jquery Tiny 滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14546252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load Jquery Tiny scrollbar
提问by r1nzler
So I want to customize a scrollbar and I found tiny scrollbar, which is a jquery plugin:
所以我想自定义一个滚动条，我发现了一个很小的滚动条，它是一个 jquery 插件：
http://baijs.nl/tinyscrollbar/
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...
问题是，无论如何我都无法让它工作。我将 Jquery 和 jquery.tinyscrollbar.js 文件包含在与我的 html 和 css 相同的文件夹中，并将它们包含在标题部分中，但我无法让它工作......
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
<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
CSS
div#chatlist {
width: 50px;
height: 140px;
border: 1px solid black;
overflow:scroll;
}
Any help would be greatly appreciated!
任何帮助将不胜感激！
回答by Julien Bourdon
As explained in the official site, you need to define a scrollbar
and a viewportclass elements in your code. Try the HTML code below:
如官方网站所述，您需要在代码中定义 ascrollbar
和 aviewport类元素。试试下面的 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>
And don't forget to amend your CSS as explained in the site too.
并且不要忘记按照站点中的说明修改您的 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; }
回答by Stephan Zaria
Using tinyscrollbar actually requires a bit of work. The things you need to do are: 1. You need to define a scrollbar, and a viewport div 2. You need to style them 3. You should get rid of overflow:scroll, as tinyscrollbar does not override the overflow functionality, and you'll get the default scrollbar alongside the tiny one.
使用 tinyscrollbar 实际上需要一些工作。您需要做的事情是： 1. 您需要定义一个滚动条和一个视口 div 2. 您需要为它们设置样式 3. 您应该摆脱溢出：滚动，因为 tinyscrollbar 不会覆盖溢出功能，并且您将在小滚动条旁边获得默认滚动条。
This is the code you should use:
这是您应该使用的代码：
<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>
