【CSS】修改滚动条样式

最新推荐文章于 2024-01-11 15:47:54 发布

qing_小诺

最新推荐文章于 2024-01-11 15:47:54 发布

阅读量228

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_33237207/article/details/101194636

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

原生的滚动条有点儿丑，如下代码实现简单的滚动条：

<!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>Document</title>
    <style>
        .scrollContent {
            width: 300px;
            height: 200px;
            overflow-y: auto;
        }
    </style>

</head>

<body>
    <div class="scrollContent">
        风是你的笑容,云是你的身影,缝隙里穿越的阳光是你给予的心情.
        　　你的笑容如风,你的身影如云,风里云里是你给予眼中的不变风景.
        　　你没有固定的姿态,你没有确定的面容,你就如风一样时刻将我围绕,你就如云一样永远飘浮在头顶.
        　　风从远方吹来,吹皱梦里春水的平静,你从高高的天空就倒映在清清的水中.
        　　你的气息从最青翠的那片林子里传来,带着新晨雨露的清香,让我陶醉其中,仿佛提起翠色的裙裾,仿佛踩踏了厚厚的青苔,仿佛那悠然的潮湿也朦胧了淡淡的心情.
        　　想你在此时,嘴角就溢满了微微的笑容,仿佛远远地远远地看着你走来的相拥.风吹动了黑发,发梢的飞扬中便有你耳语的声音;风吹动了脸颊,脸颊上就溢满了想你的红晕.
        　　风是一位使者,于千里万里牵动情丝一根,悠悠的山不再高,奔腾的水不再深,昨日的相逢如一朵不败的花儿永远使人心动.
    </div>
</body>

</html>

上面代码渲染到页面上，显示如下图效果：

如何修改滚动条样式呢？直接添加下面样式，上代码吧：

<style>
    ...

    /*修改滚动条样式*/
    div::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    div::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
    }

    div::-webkit-scrollbar-thumb {
        background: #bfbfbf;
        border-radius: 10px;
    }

    div::-webkit-scrollbar-thumb:hover {
        background: #333;
    }

    div::-webkit-scrollbar-corner {
        background: #179a16;
    }
</style>

此时，渲染到页面，显示下图：

可以看到，滚动条是不是美观多了。

参数说明：

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

附：启蒙链接：https://www.cnblogs.com/sherryweb/p/11023311.html