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;
    }
  }
}

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

相关推荐
codeshareman9 分钟前
JSON.stringify 在 React Hooks 依赖项里的坑:一次复盘
javascript
进击的尘埃11 分钟前
把 LLM 吐出来的组件扔进 `iframe` 跑:沙箱隔离这件事没你想的那么简单
javascript
ujainu12 分钟前
Electron 极简时钟应用开发全解析:托盘驻留、精准北京时间与 HarmonyOS PC 适配实战
javascript·electron·harmonyos
清空mega14 分钟前
《Vue Router 与 Pinia 入门:页面跳转、动态路由、全局状态管理一篇打通》
前端·javascript·vue.js
进击的尘埃14 分钟前
从一个 `console.log` 顺序翻车说起,聊聊微任务那些糟心事
javascript
踩着两条虫14 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(十):物料系统之内置组件库
前端·vue.js
脑子不好真君19 分钟前
手势操控的粒子土星 (Three.js + MediaPipe)
开发语言·javascript·ecmascript
坚持学习前端日记1 小时前
AI 产品开发经验
前端·javascript·人工智能·visual studio
张一凡931 小时前
easy-model:简化领域驱动开发的理想选择
前端·react.js
雾削木1 小时前
STM32输入捕获测量PWM频率占空比
前端·javascript·stm32