CSS修改浏览器默认滚动条

刺骨的言语ヽ痛彻心扉 2022-12-02 00:52 241阅读 0赞

**css修改默认滚动条代码**：

/*滚动条宽度*/
    .box-wrap::-webkit-scrollbar { 
      width: 4px;
    }
    /*滚动条里面小方块*/
    .box-wrap::-webkit-scrollbar-thumb { 
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }
    /*滚动条里面轨道*/
    .box-wrap::-webkit-scrollbar-track { 
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }

**完整示例代码如下**：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style> .box-wrap { height: 300px; width: 300px; overflow: auto; border: solid 1px #595959; } .box-inner { height: 400px; } /*滚动条宽度*/ .box-wrap::-webkit-scrollbar { width: 4px; } /*滚动条里面小方块*/ .box-wrap::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } /*滚动条里面轨道*/ .box-wrap::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1); } </style>
      </head>
      <body>
        <div class="box-wrap">
          <div class="box-inner">
            容器内容容器内容容器内容容器内容容器内容容器内容
          </div>
        </div>
      </body>
    </html>

**修改后滚动条效果如下图所示**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left]: /images/20221123/1879bad67297429db20a2cb8517bab51.png