改变滚动条样式

最新推荐文章于 2024-06-05 09:46:36 发布

荷.Demon

最新推荐文章于 2024-06-05 09:46:36 发布

阅读量1.6k

点赞数 1

分类专栏： css 文章标签：其他

本文链接：https://blog.csdn.net/qq_57767445/article/details/123607328

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在我们开发网页项目中往往会遇到滚动条，然而滚动条原本的样式太丑了，所以要改变滚动条的样式，让滚动条和我们开发的项目更加的美观更加的好看；

案例：

<div style="width: 200px; height: 200px;overflow: auto">
		 <div style="width: 300px;height: 300px;background-color:#FFFFFF ">
			</div>
	</div>

先让盒子出现滚动条；

想要改变滚动条的样式，只要写滚动条的css样式；

下面的是该页面的所有的滚动条都是这个样式，

::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
            scrollbar-arrow-color: red;
        }

::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
            scrollbar-arrow-color: red;
        }

::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
            border-radius: 0;
            background: rgba(0,0,0,0);
        }

效果图：

如果是想要改变某一个盒子的滚动条样式，那么只要在样式前加上类名或id名；

代码：

<style>	
        .gdt::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
            scrollbar-arrow-color: red;
        }

        .gdt::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
            scrollbar-arrow-color: red;
        }

        .gdt::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
            border-radius: 0;
            background: rgba(0,0,0,0);
        }
</style>

<body>
	<div style="width: 200px; height: 200px;overflow: auto">
		 <div style="width: 300px;height: 300px;background-color:#FFFFFF ">
			</div>
	</div>
	
	<div class="gdt" style="width: 200px; height: 200px;overflow: auto">
		 <div style="width: 300px;height: 300px;background-color:#FFFFFF ">
			</div>
	</div>
</body>

效果图：

荷.Demon

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
改变滚动条样式

在我们开发网页项目中往往会遇到滚动条，然而滚动条原本的样式太丑了，所以要改变滚动条的样式，让滚动条和我们开发的项目更加的美观更加的好看；案例：<div style="width: 200px; height: 200px;overflow: auto"> <div style="width: 300px;height: 300px;background-color:#FFFFFF "> </div> </div> 先让盒.
复制链接

扫一扫

专栏目录