css自定义滚动条样式

最新推荐文章于 2024-07-31 11:00:26 发布

折纸成鸢。

最新推荐文章于 2024-07-31 11:00:26 发布

阅读量204

点赞数

分类专栏：前端 css

本文链接：https://blog.csdn.net/qq_26679989/article/details/104836690

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

css自定义滚动条样式

注意：这种写法火狐浏览器和IE浏览器不支持
HTML

 <body>
		<div class="kite-scrollbar">
			滚动条默认样式修改
		</div>	 
    </body>

css

			.kite-scrollbar{
				width: 300px;
				height: 150px;
				overflow: auto;
			}
			/*滚动条整体样式*/
			.kite-scrollbar::-webkit-scrollbar {
				width: 5px;
				height: 1px;
			}
			/*滚动条滑块*/
			.kite-scrollbar::-webkit-scrollbar-thumb {
				border-radius: 10px;
				-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
				background: #C1C1C1;
			}
			/*滚动条轨道*/
			.kite-scrollbar::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
				border-radius: 10px;
				background: #F1F1F1;
			}

折纸成鸢。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css自定义滚动条样式

css自定义滚动条样式注意：这种写法火狐浏览器和IE浏览器不支持HTML <body> <div class="kite-scrollbar"> 滚动条默认样式修改 </div> </body>css .kite-scrollbar{ width: 300px; height: 150px;...
复制链接

扫一扫

专栏目录