CSS隐藏滚动条，设置滚动条样式

方法1：使用样式表（注意兼容性）

1. ::-webkit-scrollbar 使用伪类隐藏滚动条（仅限Chrome与Safari）
2. scrollbar-width: none;（仅限firefox）
3. -ms-overflow-style: none;（仅限IE 10+）

   /* 隐藏滚动条 */
   .element {
      overflow: scroll;
      scrollbar-width: none;
      -ms-overflow-style: none;
   }
   .element::-webkit-scrollbar {
       display: none;
   }
   

   方法2：使用布局遮挡滚动条

   可滚动的容器外层再签套一个父盒子，父盒子设置overflow:hidde，再配合position，变相隐藏滚动条

    <div class="outer-container">
        <div class="inner-container">
        </div>
    </div>
   

   .outer-container {
       position: relative;
       overflow: hidden;
   }
   .inner-container {
       position: absolute; 
       left: 0;
       overflow-x: hidden;
       overflow-y: scroll;
   }
    /* for Chrome */
   .inner-container::-webkit-scrollbar {
       display: none;
   }
   

   设置滚动条样式

   /* 伪元素用于设置滚动条的宽度 */
   ::-webkit-scrollbar {
     width: 8px;
   }
   
   /* 设置滚动条的轨道样式，例如背景颜色和边框样式 */
   ::-webkit-scrollbar-track {
     background-color: #F5F5F5;
   }
   
   /* 设置滚动条的滑块样式，例如背景颜色、边框样式和圆角半径 */
   ::-webkit-scrollbar-thumb {
     background-color: #000000;
     border-radius: 4px;
   }
   ```