css 美化滚动条

2023-12-18 09:43:59

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

效果

在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_43865196/article/details/135054244
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。