html简单组件（四）：滚动条显示隐藏和更改滚动条样式

最新推荐文章于 2024-03-27 10:30:00 发布

一方通行00

最新推荐文章于 2024-03-27 10:30:00 发布

阅读量8k

点赞数 3

分类专栏： HTML简单组件文章标签： html css html5 css3

本文链接：https://blog.csdn.net/qq_26666947/article/details/112271050

版权

HTML简单组件专栏收录该内容

9 篇文章 6 订阅

订阅专栏

html简单组件（四）：滚动条显示隐藏和更改滚动条样式

实现效果图：

在这里插入图片描述

HTML代码

		<div class="list scroll">
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
		</div>

CSS代码

CSS代码单独做成CSS文件引用，文件名为：scroll.css

.list-item,.list{
	/*修复滚动条在显示和隐藏时对页面布局的影响*/
	width: 200px;
}
.list {
	height: 200px;
	border: 2px solid gray;
	overflow: hidden;
}
.list:hover {
	/*鼠标移入显示滚动框，移出不显示滚动框*/
	overflow-y: auto;
}

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

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

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

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滚动条测试样例</title>
		<link rel="stylesheet" type="text/css" href="css/scroll.css">
	</head>
	<body>
		<div class="list scroll">
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
			<div class="list-item">测试滚动条</div>
		</div>
	</body>
</html>

完整资源打包地址：https://download.csdn.net/download/qq_26666947/14033507

一方通行00

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html简单组件（四）：滚动条显示隐藏和更改滚动条样式

HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式实现效果图：HTML代码 <div class="list scroll"> <div class="list-item">测试滚动条</div> <div class="list-item">测试滚动条</div> <div class="list-item">测试滚动条</div> <div class="list-item
复制链接

扫一扫