4

所以我想自定义一个滚动条，我发现了一个很小的滚动条，它是一个 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;
     }

任何帮助将不胜感激！

4

2 回答 2

9

如官方网站所述，您需要在代码中定义 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>

并且不要忘记按照站点中的说明修改您的 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; }
于 2013-01-27T10:34:59.627 回答
4

使用 tinyscrollbar 实际上需要一些工作。您需要做的事情是： 1. 您需要定义一个滚动条和一个视口 div 2. 您需要设置它们的样式 3. 您应该摆脱 overflow:scroll，因为 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>
于 2013-01-27T10:43:17.197 回答