css 美化滚动条

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

div 容器

 <div
      class="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); /* 设置滚动条滑块的背景色 */
}

效果