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

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

相关推荐
淡笑沐白9 分钟前
JavaScript零基础到精通
开发语言·javascript·ecmascript
無名路人12 分钟前
小程序点餐页吸顶滚动
前端·微信小程序·ai编程
小小小前端啊16 分钟前
前端手写代码大全
前端
李白的天不白24 分钟前
大规模请求数据并发问题
java·前端·数据库
冲浪中台1 小时前
【无标题】
前端·低代码
openKaka_1 小时前
beginWork 的第一站:HostRoot 如何把 App 接入 Fiber 树
前端·javascript·react.js
我命由我123451 小时前
Dart - Dart SDK、Hello World 案例、变量声明、常量声明、常量 final、字符串类型
前端·flutter·前端框架·html·web·dart·web app
冴羽yayujs1 小时前
GitHub 前端热榜项目 - 日榜(2026-05-11)
前端·github
~|Bernard|1 小时前
四,go语言中GMP调度模型
java·前端·golang
YOU OU2 小时前
HTML+CSS+JavaScript
前端·javascript·css·html