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

标签: css滚动条   时间:2017-11-05
html中默认滚动条的样式都是不美观的,为了让页面更加好看,我们需要自己设计滚动条样式,本文章向大家介绍css自定义滚动条样式的几个实例,需要的朋友可以参考一下。

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

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

  1. ::-webkit-scrollbar 滚动条本身的背景。
  2. ::-webkit-scrollbar-button 滚动条上方的方向按钮。
  3. ::-webkit-scrollbar-track 进度条下方的空白空间。
  4. ::-webkit-scrollbar-track-piece 进度条的最顶层没有被大拇指覆盖。
  5. ::-webkit-scrollbar-thumb 可拖动滚动元素的大小取决于可滚动元素的大小。
  6. ::-webkit-scrollbar-corner 滚动元素的底部角落,两个滚动条相遇。
  7. ::-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;
}

在线运行

原文地址:http://www.manongjc.com/article/2216.html