修改默认滚动条样式

shilong0424

已于 2022-12-08 13:41:37 修改

阅读量200

点赞数

文章标签： css css3 html

于 2022-12-08 11:50:39 首次发布

本文链接：https://blog.csdn.net/shilong0424/article/details/128234284

版权

修改默认滚动条样式

::-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
    }