CSS实现滚动条样式

最新推荐文章于 2024-07-18 13:56:09 发布

野生松

最新推荐文章于 2024-07-18 13:56:09 发布

阅读量480

点赞数 1

分类专栏： Css 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_38211541/article/details/109265027

版权

Css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

默认情况下这样：在这里插入图片描述
改完之后是这样：

CSS如下:

  .left_tree {
    max-height: calc(100vh - 150px);
    overflow-y: scroll;
    /*定义滚动条高宽及背景*/
    &::-webkit-scrollbar {
      width: 4px;
    }
    /*定义滚动条*/
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }
    /*定义滚动条轨道*/
    &::-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);
    }
  }