css 元素设置滚动条overflow:auto的样式

符懿轩
2023-12-01

1、首先说明滚动条样式是通过css的选择器来修改的,需要用到的选择器大概有下面几种:

  • ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
  • ::-webkit-scrollbar-button 滚动条两端的按钮
  • ::-webkit-scrollbar-track 外层轨道
  • ::-webkit-scrollbar-track-piece 内层滚动槽
  • ::-webkit-scrollbar-thumb 滚动的滑块
  • ::-webkit-scrollbar-corner 边角
  • ::-webkit-resizer 定义右下角拖动块的样式

2、下面做设置示范,一般三个就够了,需要用到更多设置的就自己参照文档修改对应的属性吧(对了,不是所有css属性它都支持)

    .class-name {
      max-height: 580px;
      overflow-y: auto;
    }
    /*定义整体的宽度*/
    .class-name::-webkit-scrollbar {
      width: 3px;
    }
    /*定义滚动条轨道*/
    .class-name::-webkit-scrollbar-track {
      border-radius: 5px;
    }
    /*定义滑块*/
    .class-name::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: rgba(27, 140, 236, 0.5);
    }
 类似资料: