前端给div增加滚动条并改变滚动条样式

小王讨厌洋葱

于 2023-04-27 14:43:55 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/wsdnnnnnnnnn/article/details/130406338

这段代码展示了如何使用CSS来定制网页的滚动条，包括设置滚动条的宽度、滑块的颜色和边框圆角，以及隐藏横向滚动条，只显示纵向滚动条。

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

<div class="list"></div>


<style>

.list {
  width: 100%;
  height: 350px;
  overflow-y: auto;/*竖向滚动条*/

  overflow-x: hidden;/*横向滚动条*/
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面的滑块*/
    border-radius: 5px;
    background: rgba(64, 158, 255, 0.5);
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道背景*/
    border-radius: 5px;
    background: #fff;
  }
}

</style>