css为div设计自定义滚动条样式

自定义滚动条越来越受欢迎，你可能在其他网站上看到过非常漂亮的滚动条，漂亮的滚动条使网站看起来不同。实现自定义滚动条有很多种方法。在本教程中，我们将使用CSS3来实现自定义滚动条样式（css是最简单的方法，有jQuery插件可以帮助定制滚动条，但我不喜欢添加更多的JavaScript到我的网站。如果你只是想让你的网站有一个很酷的滚动条，那么你也可以考虑使用jQuery插件）。

滚动条的css样式主要由7部分组成：

::-webkit-scrollbar 滚动条本身的背景。
::-webkit-scrollbar-button 滚动条上方的方向按钮。
::-webkit-scrollbar-track 进度条下方的空白空间。
::-webkit-scrollbar-track-piece 进度条的最顶层没有被大拇指覆盖。
::-webkit-scrollbar-thumb 可拖动滚动元素的大小取决于可滚动元素的大小。
::-webkit-scrollbar-corner 滚动元素的底部角落，两个滚动条相遇。
::-webkit-resizer 出现在某些元素的底部角落的滚动条角上方的可拖动调整大小的句柄。

实现方法：

1. html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Customize the Browser's Scrollbar with CSS</title>
        <link type="text/css" rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="scrollbar" id="style-1">
            <div class="force-overflow"></div>
        </div> 
    </body>
</html>

2. css文件

.scrollbar {
    background-color: #F5F5F5;
    float: left;
    height: 300px;
    margin-bottom: 25px;
    margin-left: 22px;
    margin-top: 40px;
    width: 65px;
       overflow-y: scroll;
}

.force-overflow {
    min-height: 450px;
}
#style-1::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
} 
#style-1::-webkit-scrollbar-thumb {
    background-color: #000000;
}
#style-1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

在线运行