div超出可滚动，自动添加滚动条，自定义滚动条样式

最新推荐文章于 2024-11-01 14:21:00 发布

一个小菜逼

最新推荐文章于 2024-11-01 14:21:00 发布

阅读量1.9k

点赞数 14

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_71854821/article/details/136295150

本文介绍了如何在HTML/CSS中使用`overflow-y:scroll`和`::-webkit-scrollbar`伪元素来实现一个具有可定制样式的滚动条，包括宽度、背景颜色和悬停效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看一下最终的效果图吧：

父盒子：横向超出滚动：overflow-y: scroll;

并且设置高度例：height: calc(100% - 36px);

.container {
	overflow-y: scroll;
	height: calc(100% - 36px);
}

自定义滚动条样式

.container::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-button {
	display: none;
}
::-webkit-scrollbar-track {
	background-color: rgba(70, 166, 255, 0.1);
	display: none;
}
::-webkit-scrollbar-thumb {
	background-color: rgba(70, 166, 255, 0.4);
	border: 2px solid transparent;
	border-radius: 6px;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.5);
}