滚动条相关

全局滚动条

//必须含有一个width属性
::-webkit-scrollbar {
        width: 10px;
}
//滚动条滑块样式
::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
 }
//滚动条轨道
::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #ededed;
}
 /* 滚动条两端按钮 */
::-webkit-scrollbar-button {
}
 /* 两个滚动条交接处 -- x轴和y轴 (可有可不有) */
::-webkit-scrollbar-corner {
        background-color: transparent;
} 

单个容器滚动条设置

 /* 滚动条所在容器 */
      .scroll-container {
        margin: 10px;
        width: 500px;
        height: 150px;
        overflow: overlay;
        background-color: yellow;
      }
 /* 滚动条整体 */
      .scroll-container::-webkit-scrollbar {
        width: 10px;
      }
 /* 两个滚动条交接处 -- x轴和y轴 */
       .scroll-container::-webkit-scrollbar-corner {
        background-color: transparent;
      } 
 /* 滚动条滑块 */
      .scroll-container::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
      }
 /* 滚动条轨道 */
      .scroll-container::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #ededed;
      }
 /* 滚动条两端按钮 */
      .scroll-container::-webkit-scrollbar-button {
      }