css 滚动条设置

1. 滚动条相关的CSS伪元素

• ::-webkit-scrollbar 滚动条整体部分

• ::-webkit-scrollbar-button 滚动条两端的按钮

• ::-webkit-scrollbar-track 外层轨道

• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

• ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那个

• ::-webkit-scrollbar-corner 边角

• ::-webkit-resizer 定义右下角拖动块的样式

2. 自定义滚动条

// less mixins
.custom-scroll() {
  &::-webkit-scrollbar {
    width: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border-width: 2px;
    border-radius: 4px;
    border-style: dashed;
    border-color: transparent;
    background-color: rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
  }
  &::-webkit-scrollbar-thumb:hover {
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.24);
  }
}

3. 使用

.list {
  height: 76px;
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  padding: 16px;
  background-color: #fff;
  overflow-y: scroll;
  .custom-scroll();
  .item {
    flex-shrink: 0;
    font-size: 12px;
    color: #296ae4;
    text-decoration: underline;
    .ellipsis();
  }
}

4. 参考资料

https://blog.csdn.net/Qxn530/article/details/126647153 【Vue】滚动条（设置滚动条、滚动条样式、鼠标移入滚动条显示移出滚动条隐藏....）
https://zhuanlan.zhihu.com/p/407225325 浏览器滚动条hover时变粗、改变颜色
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip background-clip