HTML添加滚动条，并将滚动条改为hover显示

最新推荐文章于 2025-09-22 11:22:19 发布

原创最新推荐文章于 2025-09-22 11:22:19 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

本文介绍如何使用CSS实现HTML滚动条的样式定制，使其仅在鼠标悬停时显示，提升页面交互体验。

在这里插入图片描述

<style type="text/css">
	.listbox {
		height: 150px;
		width: 200px;
		border: solid #000000;
	}

	.listbox li {
		list-style: none;
	}

	.listbox ul {
		padding: 0;
		margin: 0;
		overflow: hidden;
		height: 100%;
		width: 100%;
		/* overlay 将滚动条浮动在元素上，不另外占用宽度（只兼容Chrome内核） */
		/* overflow:overlay ; */
	}

	/* 将滚动调设置成悬停出现 */
	.listbox ul:hover {
		overflow: overlay;
	}

	/* ul列表滚动条样式 */
	.listbox ul::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 8px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 2px;
		/* display: none; */
	}

	.listbox ul::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		background-color: rgb(204, 200, 198);
	}

	/*滚动条里面轨道*/
	.listbox ul::-webkit-scrollbar-track {
		/* box-shadow: inset 0 0 5px rgb(255, 255, 255);
	  background: #ededed;
	  border-radius: 10px; */
		display: none;
	}
</style>

效果图：
在这里插入图片描述