CSS 修改滚动条样式

  • 默认滚动条(MacWin)

    CSS 修改滚动条样式

  • 修改样式

    // 滚动条主视图
    .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;
    }
    
  • 案例效果

    CSS 修改滚动条样式

    CSS 修改滚动条样式

上一篇:隐藏滚动条


下一篇:CSS3自定义滚动条样式 -webkit-scrollbar