修改浏览器滚动条默认样式

最新推荐文章于 2024-06-07 16:34:02 发布

写Bug的切图仔

最新推荐文章于 2024-06-07 16:34:02 发布

阅读量414

点赞数

分类专栏：前端工作个人语录文章标签： css css3

本文链接：https://blog.csdn.net/kDevelop/article/details/110704794

版权

前端同时被 3 个专栏收录

10 篇文章 1 订阅

订阅专栏

工作

6 篇文章 1 订阅

订阅专栏

个人语录

3 篇文章 0 订阅

订阅专栏

修改浏览器滚动条默认样式

浏览器默认滚动条太宽，太丑，自定义浏览器滚动条样式，打造属于自己的滚动条风格
在这里插入图片描述

组成

滚动条主要有3部分组成，修改这3部分就能自定义滚动条

::-webkit-scrollbar //滚动条整体样式

::-webkit-scrollbar-track //外层轨道

::-webkit-scrollbar-thumb //滚动条内部滑块

/* 滚动条整体部分 */
#wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
/* 外层轨道 */
#wrapper::-webkit-scrollbar-track {
	background: rgb(200, 200, 200);
}
/* 滚动条可以拖动的那部分 */
#wrapper::-webkit-scrollbar-thumb {
    background: rgb(120, 120, 120);
    border-radius: 5px;
}
/* 点击滚动条的时候改变背景颜色 */
#wrapper::-webkit-scrollbar-thumb:active {
	background: #5a5959;
}
/* 边角 */
#wrapper::-webkit-scrollbar-corner {
	background: rgb(120, 120, 120);
}

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

效果

在这里插入图片描述

IE浏览器css设置滚动条

滚动条样式	支持情况	支持浏览器版本	可否继承	描述
scrollbar-3dlight-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-highlight-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-face-color	IE特有属性	IE5.5+	y	设置滚动框和滚动条箭头的颜色
scrollbar-arrow-color	IE特有属性	IE5.5+	y	设置滚动条箭头的颜色
scrollbar-shadow-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头右下边缘的颜色
scrollbar-dark-shadow-color	IE特有属性	IE5.5+	y	设置滚动条槽的颜色
scrollbar-base-color	IE特有属性	IE5.5+	y	设置滚动条主要构成部分的颜色
scrollbar-track-color	IE特有属性	IE5.5+	y	设置滚动条轨迹组成部分的颜色