vue中css修改滚动条样式

vue中css修改滚动条样式

效果图：

代码(在app.vue中全局增加下面样式即可)：

&::-webkit-scrollbar {
    
    
    width: 8px;
    height: 8px;
    border-radius: 3px;
  }

  /*定义滚动条轨道 内阴影+圆角*/

  &::-webkit-scrollbar-track {
    
    
    //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.05);
  }

  /*定义滑块 内阴影+圆角*/

  &::-webkit-scrollbar-thumb {
    
    
    border-radius: 3px;
    //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background: rgba(0, 0, 0, 0.15);
  }