css实现更改页面滑动条颜色和样式

最新推荐文章于 2024-10-16 22:10:28 发布

一蓑烟雨..

最新推荐文章于 2024-10-16 22:10:28 发布

阅读量3.3k

点赞数

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

本文链接：https://blog.csdn.net/weixin_44713688/article/details/118758013

版权

CSS 滚动条样式伪类选择器网页设计

关键词由CSDN通过智能技术生成

html\css 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

使用::-webkit-scrollbar可以改变滚动条样式，其中：
::-webkit-scrollbar ：可以设置整个滚动条的样式；
::-webkit-scrollbar-button ：滚动条上的按钮 (上下箭头)；
::-webkit-scrollbar-thumb ：滚动条上的滚动滑块的样式；
::-webkit-scrollbar-track ：滚动条轨道；
::-webkit-scrollbar-track-piece ：滚动条没有滑块覆盖的轨道部分；
::-webkit-scrollbar-corner ：当同时有垂直滚动条和水平滚动条时交汇的部分，默认为白色；
::-webkit-resizer ：某些元素的corner部分的部分样式.；

		::-webkit-scrollbar{
            width: 15px;
        }
        ::-webkit-scrollbar-button{
            background-color: rgb(49, 132, 240);
        }
        ::-webkit-scrollbar-thumb{
            background: linear-gradient(rgb(28, 57, 226),rgb(189, 17, 212));     
            border-radius: 2px;
            transition: 1s;
        }
        ::-webkit-scrollbar-thumb:hover{
            background: linear-gradient(rgb(38, 65, 221),rgb(143, 27, 158));     
        }
        ::-webkit-scrollbar-track{
            background-color: rgb(206, 136, 233);
        }
        ::-webkit-scrollbar-corner{
            background-color: rgb(96, 4, 133);
        }
        .box{
            width: 3000px;
            height: 1000px;
        }

页面部分html：

<body>
    <div class="box">
        <div style="width: 800px;height: 200px;background-color:rgb(157, 103, 207)"></div>
    </div>
    <div class="box">
        <div style="width: 800px;height: 200px;background-color:rgb(157, 103, 207)"></div>
    </div>
    <div class="box">
        <div style="width: 800px;height: 200px;background-color:rgb(157, 103, 207)"></div>
    </div>
</body>