css修改滚动条样式

CSS（Cascading Style Sheets）是前端开发中使用频率最高的技术之一，可以实现丰富的页面视觉效果。其中，自定义滚动条样式也是一种常见需求。本文将介绍如何使用CSS来设置滚动条的样式。

CSS提供了一些基本的滚动条样式设置，我们可以在样式表中给滚动条添加如下的属性：

::-webkit-scrollbar：设置滚动条的宽（或高）度。

• 对于垂直滚动条，width属性起作用；
• 对于水平滚动条，height属性起作用。

::-webkit-scrollbar-track：设置滚动条的背景色。

::-webkit-scrollbar-thumb：设置滚动条滑块的颜色。

body {
  overflow: auto;
  min-width: 1200px;
  
    /*滚动条容器*/
  &::-webkit-scrollbar {
    opacity: 0;
    background: transparent !important; //滚动条容器背景色
    width: 2px; //y轴滚轮的宽
    // height: 2px; //x轴滚轮的高
  }
  
    /*滚动条里面小方块*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #e7e7e7a1;
  }
  
    /*滚动条里面轨道*/
  &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    // border-radius: 10px;
    background: transparent;
    //  -webkit-scrollBar-track-color:black;
  }
}