Skip to content

css 滚动条美化

::-webkit-scrollbar

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

下面代码从 Element Plus 抠出,当前笔记(配置在 style.css 中)也在使用:

css
::-webkit-scrollbar {
  width: 6px
}

::-webkit-scrollbar:horizontal {
  height: 6px
}

::-webkit-scrollbar-track {
  border-radius: 10px
}

::-webkit-scrollbar-thumb {
  background-color: #0003;
  border-radius: 10px;
  transition: all .2s ease-in-out
}

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background-color: #0000004d
}

.dark ::-webkit-scrollbar-thumb {
  background-color: #fff3
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: #fff6
}