css 美化滚动条

当div内容溢出容器定义的高度时,滚动条显示,并美化默认的滚动条样式

div 容器

 <divclass="content">内容
</div>

css 样式

/* 问话区域 滚动条 */
.content {overflow: auto;height: 662px;padding: 25px;scrollbar-width: thin; /* 设置滚动条宽度 */border-radius: 10px; /* 设置滚动条圆角 */
}
/* 滚动条美化 */
.content::-webkit-scrollbar {width: 7px; /* 设置滚动条的宽度 */
}.content::-webkit-scrollbar-track {/* background: #; 设置滚动条轨道的背景色 */opacity: 0.5
}.content::-webkit-scrollbar-thumb {background: rgb(164, 168, 167); /* 设置滚动条滑块的背景色 */
}

效果