css 滚动条自定义样式

奚大野...

已于 2022-07-22 19:05:27 修改

阅读量100

点赞数

分类专栏： javascript 文章标签： css css3 html

于 2022-06-09 15:54:48 首次发布

本文链接：https://blog.csdn.net/qq_41752378/article/details/125204744

版权

javascript 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在CSS中为`.scrollContent`类设置滚动条样式，包括隐藏横向滚动条，仅显示垂直滚动条，并自定义滚动条的宽度、颜色以及圆角等效果。同时，展示了全局定义滚动条样式的代码，以统一页面滚动条的视觉风格。这种技术对于提升网页用户体验具有重要意义。

摘要由CSDN通过智能技术生成

一、 div 中设置在overflow:auto的当前级下设置

<div class="scrollCanner">
	<div class="scrollContent">
		.....
		//填充的内容
		.....
	</div>
</div>

.scrollCanner{
	width:500px;
	height:100vh；
	overflow:hidden;
}
.scrollContent{
	overflow-x:hidden;
	overflow-y:auto;
}
.scrollContent::-webkit-scrollbar {
     width: 4px;
 }
 .scrollContent::-webkit-scrollbar-thumb {
     border-radius: 10px;
     background: #3c506e;  //上层块颜色
 }
 .scrollContent::-webkit-scrollbar-thumb:hover {
     background: #103264;  //上层块颜色
 }
 .scrollContent::-webkit-scrollbar-track {
     border-radius: 10px;
     background: #bab9b9;   //底层背景块颜色
 }

效果图如下：
请添加图片描述

二、全局定义

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background: #3c506e; /* 上层 */
}
::-webkit-scrollbar-thumb:hover{
  background: #103264; /* 上层 */
}
::-webkit-scrollbar-track {
  border-radius: 0px;
  background: #bab9b9;  
}