Firefox、Chrome浏览器滚动条样式设置

Firefox支持无前缀的CSS属性scrollbar-color和scrollbar-width。

代码示例使用CSS变量，Internet Explorer 11不支持这些变量。

:root {
  --scrollbar-track-color: transparent;
  --scrollbar-color: rgba(0,0,0,.2);

  --scrollbar-width: thin; /* or `auto` or `none` */
}
.overflowing-element {
  scrollbar-width: var(--scrollbar-width); 
  scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
}

Chrome / Safari / Chromium-Edge 
基于WebKit/Blink的浏览器支持用于定制的非标准伪元素。

:root {
  --scrollbar-track-color: transparent;
  --scrollbar-color: rgba(0,0,0,.2);

  --scrollbar-size: .375rem;
  --scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
}
.overflowing-element::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}
.overflowing-element::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}
.overflowing-element::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  /* Add :hover, :active as needed */
}
.overflowing-element::-webkit-scrollbar-thumb:vertical {
  min-height: var(--scrollbar-minlength);
}
.overflowing-element::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--scrollbar-minlength);
}

Internet Explorer和基于EdgeHTML的Edge上的滚动条，如果使用-ms-overflow-style: -ms-autohiding-scrollbar;则会默认隐藏滚动条，当鼠标移上去的时候才会显示滚动条。