滚动条 -webkit-scrollbar

最新推荐文章于 2025-02-23 13:45:10 发布

诚诚程程成

最新推荐文章于 2025-02-23 13:45:10 发布

阅读量408

点赞数 7

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52268321/article/details/136702578

版权

这篇文章介绍了如何使用CSS为Webkit浏览器中的滚动条设置自定义样式，包括滑块和轨道的颜色和圆角。

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

在这里插入图片描述

<div class="container-box">
  <div class="content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>8</div>
    <div>8</div>
    <div>0</div>
    <div>6</div>
    <div>68</div>
  </div>
</div>

  .container-box{
    overflow: scroll;
    height: 200px;
  }
  .content {
    height: 500px;
  }
  // 用于设置滚动条的整体样式，且必须要设置宽高，否则不生效
  .container-box::-webkit-scrollbar{
    width: 10px;
    height: 10px;
  }
  // 滚动条滑块
  .container-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: red;
  }
  // 滚动条轨道
  .container-box::-webkit-scrollbar-track {
    background-color: wheat;
  }