自定义滚动条样式

我仰泳一级棒

于 2021-01-11 15:27:00 发布

阅读量116

点赞数 1

分类专栏：项目开发历程文章标签： css3 css 前端

本文链接：https://blog.youkuaiyun.com/like_js/article/details/112471047

版权

项目开发历程专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何通过CSS3来优化和定制滚动条的外观，以满足前端界面的美观需求。内容涉及到使用overflow属性开启滚动条，并应用CSS3样式进行美化。

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

优化背景: (overflow:auto)

客户嫌浏览器自带的滚动条样式太丑了,要优化

关键代码

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 286px;
  padding: 0 0 20px 0;
  overflow-y: auto;
  // 也可以写在里面
  // &::-webkit-scrollbar {
  //   /*滚动条整体样式*/
  //   width: 4px;
  //   height: 4px;
  // }
}

.wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
  height: 30px;
}
.wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: #fff;
  border-radius: 23px;
}
.wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background: #d2d6e0;
  border-radius: 35px;
}
.wrap::-webkit-scrollbar-thumb:hover {
  background: #d2d6e0;
}
.wrap::-webkit-scrollbar-corner {
  background: #d2d6e0;
}
</style>