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

浏览器系统默认的滚动条样式又粗又黑，非常影响观感。

其次在体验过程中，这种原生滚动条一般在容器本身宽度的外侧，当布局比较紧凑时这突然出现的额外宽度往往会导致布局发生问题。更是会在有滚动条和无滚动条的页面切换时因为这小小的10px出现页面抖动，严重影响用户体验！

实现以下需求：

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">

.searchWrapper {
    height: 200px;
    overflow-y: scroll;
}

最终效果如下：