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

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

相关推荐
幻境如梦丶皆为虚13 分钟前
从零写一个 DSH 插件:在左侧菜单栏加一个「测试」
开发语言·javascript·ecmascript
吹什么轩16 分钟前
constexpr 完全指南:从 const 的两种含义,到编译期计算的四次演进
java·前端·javascript
Bruce_Liuxiaowei1 小时前
前端校验登录态,等于没校验——一次应急广播终端高危漏洞的发现与报送
运维·前端·安全
Meta Luo1 小时前
AI 时代,Web 自动化测试该怎么做?
前端·人工智能·playwright 替代工具·无代码自动化测试工具·低代码 ui 自动化测试·web 回归测试工具
去伪存真1 小时前
AI Agent 性能评估指标与自动化测试落地方案
前端·agent
MaAidan1 小时前
用 Agent 排查线上问题:SLS 日志分析 + DB/Redis 数据验证,一条链路搞清楚
前端·bootstrap·html
墨林陌2 小时前
AI 热点日报(2026-11-03):美团发布 1.6 万亿参数国产大模型,四大厂商共推 AI 训练退出标准
前端
Moment2 小时前
DeepSeek 发布新模型,直接把 Agent 联网搜索的门槛打下来了!
前端·后端
AI宇宙狂想家2 小时前
开源 AI 视频工具进化史:从难用到好用,OpenMontage 改了什么
开发语言·前端·人工智能·开源·ai创业·openmontage
Sailing2 小时前
🚀🚀【封闭结束7】Agent 为什么总是“失忆”?从长期记忆到上下文工程的生产实践
前端·人工智能·agent