拯救UI美感！纯CSS实现「幽灵」滚动条：悬停显示、贴边优雅

浏览器系统默认的滚动条样式又粗又黑，非常影响观感，为此特意做了一版样式优化。

实现以下需求：

1. 默认不显示，鼠标移入滑动范围内才显示。（保证页面无需滑动时不臃肿）；
2. 使用简单，添加到全局样式中后，使用时只需在class中添加类名即可。；
3. 滚动条贴边（需要div内部样式准确）；
4. 调整粗细和颜色，增强使用体验！

.commonScroll {
  scrollbar-color: transparent transparent;
  scrollbar-width: 8px;

  & ::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 2px;

    &:horizontal {
      background-color: transparent;
      border-radius: 2px;
    }
  }

  &:hover {
    scrollbar-color: var(--g-scroll-bar-color) transparent;

    & ::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-thumb {
      background-color: var(--g-scroll-bar-color);
      border-radius: 2px;

      &:horizontal {
        background-color: var(--g-scroll-bar-color);
        border-radius: 2px;
      }
    }
  }

  & ::-webkit-scrollbar-track,
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
}


//  dark.css:    --g-scroll-bar-color:  #565657;
// light.css:    --g-scroll-bar-color: #CACBCC;

使用时

<div class="searchWrapper  commonScroll">

最终效果如下：