CSS3自定义滚动条样式

程序员文章站 2022-07-03 20:50:30

...

写静态页面时，总会遇到容器小内容多的情况，那么肯定就会用到浏览器的滚动条了。而浏览器自带的滚动条实在是太丑了，所以只好自定义滚动条样式，来满足业务需求。。。。

一、首先了解滚动条的组成：

::-webkit-scrollbar 滚动条整体部分（其中的属性有width,height,background,border等）
::-webkit-scrollbar-thumb 滚动条里面可以拖拽的部分，能上下移动（或左右移动，取决于是垂直或水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 定义右下角拖动块的样式（两个滚动条的交汇处上用于通过拖动调整元素大小的控件）

二、DEMO小例子（demo效果图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义滚动条样式</title>
    <style>
        body {
            color: #fff;
            background: #302623;
        }
        .warp {
            overflow: overlay;
            margin: 30px;
            padding: 20px 40px;
            width: 160px;
            height: 100px;
        }

        /* 滚动条的样式 *//*定义滚动条宽高及背景 宽高分别对应横竖滚动条的尺寸*/ 
        ::-webkit-scrollbar {     
            width: 5px;     
            height: 5px;     
            background-color: #372d2a; 
        }  
        /*定义滚动条轨道（内阴影+圆角）*/ 
        ::-webkit-scrollbar-track {     
            -webkit-box-shadow: inset 0 0 6px #403630;    
            border-radius: 5px;     
            background-color: #373232; 
        } 
        /*定义滑块（内阴影+圆角）*/ 
        ::-webkit-scrollbar-thumb {     
            border-radius: 5px;     
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);     
            background-color: #66574c; 
        }
    </style>
</head>
<body>
    <div class="warp">
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
        自定义滚动条样式<br/>
    </div>
</body>
</html>

CSS3自定义滚动条样式