css如何让滚动条不占用宽度 hover上去会显示滚动条

换个简单点可以复用的思路,既然滚动条一直占用宽度,那么我们把滚动条设置成透明,然后hover上去的时候显示颜色不就可以了吗

javascript 复制代码
.hover-scrollbar {
  overflow: auto;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }

  &:hover {
    scrollbar-color: #8a8e99 transparent;

    &::-webkit-scrollbar-thumb {
      background-color: #8a8e99;
    }
  }
}

把上面的样式放到需要有滚动条的地方即可

相关推荐
不会聊天真君6472 小时前
JavaScript基础语法(Web前端开发笔记第三期)
前端·javascript·笔记
齐鲁大虾2 小时前
新人编程语言选择指南
javascript·c++·python·c#
IT_陈寒2 小时前
SpringBoot自动配置这破玩意儿又坑我一次
前端·人工智能·后端
妖精的羽翼2 小时前
前端(Vue)→ 全栈 + AI 应用开发
前端
码路飞3 小时前
玩了一圈 AI 编程工具,Background Agent 才是让我真正震撼的东西
前端·javascript
UCloud_TShare3 小时前
优刻得发布云搜索服务CSS:面向AI时代的企业级搜索基础设施
前端·css·人工智能
林恒smileZAZ3 小时前
Three.js实现更真实的3D地球[特殊字符]动态昼夜交替
开发语言·javascript·3d
月月大王的3D日记3 小时前
别再复制粘贴了,从零拆解 3D 场景的诞生过程
javascript
木斯佳3 小时前
前端八股文面经大全:字节暑期前端一面(2026-04-21)·面经深度解析
前端·面试·校招·面经·实习