CSS 修改滚动条样式

• 默认滚动条(Mac、Win)

  

• 修改样式

  // 滚动条主视图
  .page-content::-webkit-scrollbar {
    width: 8px;
    background: red;
  }
  // 滚动条进度条视图
  .page-content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-Box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: green;
  }
  // 滚动条进度背景视图
  .page-content::-webkit-scrollbar-track {
    -webkit-Box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: yellow;
  }
  

• 案例效果