css 自定义滚动条颜色

时间：2024-03-02 20:14:10

1. div代码。

<body>
  <div class="div-box box1">
    <div class="div-text"></div>
  </div>
</body>

2. css代码。

<style>
  .div-box {
    width: 600px;
    height: 200px;
    overflow-y: auto;
    border: 1px solid #DCDFE6;
    margin: 20px;
  }
  .box1::-webkit-scrollbar{
    height: 20px;
    width: 20px;
  }
</style>

　　

　　设置滚动条颜色：

.div-box {
    width: 600px;
    height: 200px;
    overflow-y: auto;
    border: 1px solid #DCDFE6;
    margin: 20px;;
    scrollbar-arrow-color: #000; /*顶部/底部图标颜色*/
    scrollbar-face-color: #333; /*滚动条颜色*/
    scrollbar-shadow-color: #999;/*滚动条阴影颜色*/
  }

 

　　设置滚动条尺寸：

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  .div-box::-webkit-scrollbar{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
  }
  
  /*定义滚动条轨道 内阴影+圆角*/
  .div-box::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }
  
  /*定义滑块 内阴影+圆角*/
  .div-box::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
  }

 

转载自: https://blog.csdn.net/hanshileiai/article/details/40398177

　　

相关文章