html自定义滚动条样式

最新推荐文章于 2023-05-30 11:41:29 发布

JT___

最新推荐文章于 2023-05-30 11:41:29 发布

阅读量327

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/JTJT_/article/details/112986063

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
	<style type="text/css">
		
	.innerbox{
overflow-y: auto;
background-color: #f8f8f8;
height: 200px;
padding: 10px;
}
.innerbox::-webkit-scrollbar {/*滚动条整体样式*/
width: 50px; /*高宽分别对应横bai竖滚动条的尺寸*/
height: 50px;
scrollbar-arrow-color:red;
}
.innerbox::-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;
}
.innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
</style>
</head>
<body>

	<div class="innerbox" style="width:600px;height:600px;overflow-y:auto">
		<div class="content" style="width:900px;height:300px;">这是第一行</div>
		<div class="content" style="width:900px;height:300px;">这是第二行</div>
		<div class="content" style="width:900px;height:300px;">这是第三行</div>
	</div>

</body>
</html>

效果

在这里插入图片描述

JT___

关注

1
点赞
踩
1

收藏

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

html代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>test</title> <style type="text/css"> .innerbox{overflow-y: auto;background-color: #f8f8f8;height: 200px;padding: 10px;}.innerbox::-webki
复制链接

扫一扫