css移入显示滚动条移出隐藏滚动条

序言

别因今天的懒惰，让明天的您后悔。输出文章的本意并不是为了得到赞美，而是为了让自己能够学会总结思考；当然，如果有幸能够给到你一点点灵感或者思考，那么我这篇文章的意义将无限放大。

背景

最近突然想到以前公司有一个需求：鼠标移入时显示滚动条，鼠标移出后隐藏滚动条；当时公司的一个领导说：这个简单的很，直接用js就可以实现了，然后我去百度了一下发现确实是可以实现的，但是...但是每一个地方都需要去处理或者用统一的类名等情况，很是麻烦，我就在想css可以实现吗？在经过多次百度调试以后发现确实可以的，垃圾领导...

效果

我们从图片中可以看出效果是实现了的，并且适用于全局；也就是几串CSS代码可以让整个项目滚动条都可以达到这个效果：

CSS代码

因为我是用less在vue项目做的，如果在你们的项目中有差异，你们就适当调整一下即可，下面是示例代码：

App.vue中复制该代码即可

:root {
  /* 滚动条整体部分，必须要设置 */
  ::-webkit-scrollbar {
    width: 3px;
    height: 10px;
    overflow-y: overlay;
  }

  /* 滚动条里面轨道，能向上向下移动 */
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  /* 滚动条里面轨道，能向上向下移动 */
  ::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    display: none;
    border-radius: 3px;
  }

  /* 滚动条里面的小方块，能向上向下移动 */
  *:hover::-webkit-scrollbar-thumb {
    display: flex;
    background-color: #fff;
    border-radius: 3px;
  }

  *:hover::-webkit-scrollbar-track-piece {
    background-color: #6b7280;
  }
}

总结

很多时候我们要有自己的判断，别人的话不一定正确；一位伟人说过：实践才是检验真理唯一标准；在工作中很多所谓的领导不一定有你的能力强。

原文链接：https://juejin.cn/post/7433791520842055714