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

最新推荐文章于 2024-12-10 17:30:37 发布

原创最新推荐文章于 2024-12-10 17:30:37 发布 · 339 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #html

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

<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>