CSS——美化全局滚动条

CSS——美化全局滚动条代码效果代码话不多说，直接附上代码：// 美化滚动条::-webkit-scrollbar {width: 10px;height: 10px;}::-webkit-scrollbar-track {width: 6px;background: rgba(#101F1C, 0.1);-webkit-border-radius: 2em;-moz-border-radius:

前端技术迷

9095人浏览 · 2020-12-30 19:05:58

前端技术迷 · 2020-12-30 19:05:58 发布

CSS——美化全局滚动条

代码
效果

代码

话不多说，直接附上代码：

// 美化滚动条
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144,147,153,.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color .3s;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144,147,153,.3);
}