欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浏览器滚动条默认样式修改

程序员文章站 2022-06-16 21:33:02
效果如下 直接贴代码了 ......

效果如下

浏览器滚动条默认样式修改

 

直接贴代码了

.sidebar {
    z-index: 1024;
    position: fixed;
    left: 0;
    top: 64px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #001529;
  }
  .sidebar::-webkit-scrollbar-track { /* 定义滚动条轨道  内阴影+圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: #f5f5f5;
  }

  .sidebar::-webkit-scrollbar { /*滚动条整体样式*/
    width: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
  }

  .sidebar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
  }