CSS3改变滚动条样式

最新推荐文章于 2024-07-18 13:56:09 发布

jerny2017

最新推荐文章于 2024-07-18 13:56:09 发布

阅读量387

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/jerny2017/article/details/80270349

CSS 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用CSS针对webkit内核浏览器自定义滚动条样式，包括滑块的宽度、高度及样式设置。提供了具体示例代码，展示了如何为div元素设置自定义滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、::-webkit-scrollbar   滑块的宽度，width是垂直方向的宽度，height是水平方向的宽度；
2、::-webkit-scrollbar-thumb  滑块部分的样式，宽高就不用设置了；
3、::-webkit-scrollbar-track   轨道部分的样式，宽高就不用设置了；

只有webkit内核的浏览器支持此样式，pc端有兼容问题，移动端可以使用
例子：

<div id="div1">
    <div class="content"></div>
</div>

#div1{
    width: 500px;
    height: 300px;
    overflow: auto;
    border: 1px solid #ccc;
}
#div1::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#div1::-webkit-scrollbar-thumb{
    background: #ccc;
    border-radius: 10px;
}
#div1::-webkit-scrollbar-track {
    background: #fff;
    box-shadow: inset 0 0 5px #ccc;
    border-radius: 10px;

}
.content{
    width: 1000px;
    height: 500px;

}