纯CSS修改滚动条样式

YJ_0518

已于 2024-01-16 10:34:06 修改

阅读量1.7k

点赞数

分类专栏： css 文章标签： css html css3

于 2021-05-13 11:47:44 首次发布

本文链接：https://blog.csdn.net/weixin_45606890/article/details/116743162

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

纯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 定义右下角拖动块的样式

上面是滚动条的主要几个设置属性，还有更详尽的CSS属性

:horizontal 水平方向的滚动条

:vertical 垂直方向的滚动条

:decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)

:increment decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)

:start 伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

:end 类似于start伪类，标识对象是否放到滑块的后面。

:double-button 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。

:single-button 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。

:no-button 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。

:corner-present 用于所有滚动条轨道，指示滚动条圆角是否显示。

:window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

实例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 200px;
            border: 1px solid #eee;
            padding: 15px;
            box-sizing: border-box;
            overflow: auto;
            background: #718d93;
            resize: both; /*实现拖拽的功能*/
        }
        .container P{
            margin: 0;
            width: 500px;
            color: #fff;
        }
        .container::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 12px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 12px;
            background: #b4ccce;
        }
        .container::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #b4ccce
        }
        .container::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #b8bfbf;
        }
        .container::-webkit-scrollbar-button{
            /* 滚动条两端的按钮 */
            background: #b4ccce;
        }
        .container::-webkit-scrollbar-button:decrement:horizontal{
            /* 水平方向--左侧按钮 */
            background: url(./img/zuo.png) no-repeat center center;
            background-size: 70% 80%;
        }
        .container::-webkit-scrollbar-button:increment:horizontal{
            /* 水平方向--右侧按钮 */
            background: url(./img/you.png) no-repeat center center;
            background-size: 70% 80%;
        }
        .container::-webkit-scrollbar-button:decrement:vertical{
            /* 垂直方向--上面按钮 */
            background: url(./img/shang.png) no-repeat center center;
            background-size: 80% 70%;
        }
        .container::-webkit-scrollbar-button:increment:vertical{
            /* 垂直方向--下侧按钮 */
            background: url(./img/xia.png) no-repeat center center;
            background-size: 80% 70%;
        }
        .container::-webkit-scrollbar-corner{
            /* 滚动条边角 */
            background: #a3babb;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>
            There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.
        </p>
    </div>
</body>
</html>