css修改滚动条的样式

滚动条样式的修改是通过伪元素实现的:

-webkit-scrollbar ​滚动条整体部分
​-webkit-scrollbar-button​ 滚动条两端的按钮
​-webkit-scrollbar-track ​外层轨道
​-webkit-scrollbar-track-piece​ 内层轨道,滚动条中间部分(除去)
​-webkit-scrollbar-thumb​ 内嵌滑块
​-webkit-scrollbar-corner​ 边角
​-webkit-resizer ​定义右下角拖动块的样式

例子:

  div::-webkit-scrollbar {
    width: 4px;
  }
  div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 0.2;
    background: fade(@primary-color, 60%);
  }
  div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: fade(@primary-color, 30%);
  }

 

posted @ 2023-08-01 11:28  seven&night  阅读(734)  评论(0编辑  收藏  举报