CSS Scrollbars

用于一些浏览器,解决了scrollbar太宽,太粗的问题。

这里注意,只有IE、Chrome实现了::scrollbar的伪元素,所以对于Firefox暂时无解。现在标准CSSWG已经提了,但是似乎没有太多的进展。


::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0);
  -webkit-border-radius: 100px;
}
::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.61);
  -webkit-border-radius: 100px;
}

看看这爆炸的兼容性