滚动条样式更改

::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
   ::-webkit-scrollbar-button 滚动条两端的按钮
   ::-webkit-scrollbar-track 外层轨道
   ::-webkit-scrollbar-track-piece 内层滚动槽
   ::-webkit-scrollbar-thumb 滚动的滑块
   ::-webkit-scrollbar-corner 边角
   ::-webkit-resizer 定义右下角拖动块的样式
    */
    //给有滚动条的div(我的div类名是workBottom)添加如下样式即可
    .workBottom::-webkit-scrollbar {
      width: 8px;
    }

    .workBottom::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
      background: #C7DDFC;
    }

    .workBottom::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
      border-radius: 0;
      background: #C7DDFC;
    }
    .workBottom::-webkit-scrollbar-track-piece {
      background:#EFF3F8
    }
 

你可能感兴趣的:(css3,css,html)