修改滚动条样式

肖战的小可爱呀～

已于 2023-12-04 17:32:22 修改

阅读量414

点赞数 5

文章标签： css css3 前端

于 2023-11-28 17:14:23 首次发布

本文链接：https://blog.csdn.net/xzdnana/article/details/134672231

版权

本文介绍如何在CSS中修改Webkit浏览器的滚动条样式，仅显示侧面滚动条，通过设置外层div的overflow属性为scroll，并详细配置::-webkit-scrollbar、::-webkit-scrollbar-track-piece和::-webkit-scrollbar-thumb的样式。

摘要由CSDN通过智能技术生成

修改滚动条样式

只要侧面不要底部的滚动条

在这里把外层的div盒子设置成scroll
overflow: scroll;
    &::-webkit-scrollbar{
      width: 4px;
      height: 0px;
      background: #0a0e2b; // 这里设置成和底色差不多的颜色
    }
    &::-webkit-scrollbar-track-piece{
      background: #0a0e2b; // 这里设置成和底色差不多的颜色
    }
    &::-webkit-scrollbar-thumb{
      border-radius: 5px;
      height: 50px;
      box-shadow: inset 0 0 0px #606987;
      background: #1D8CFF; // 这里设置想要的滚动条的颜色
    }