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

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

相关推荐
小小小小宇4 分钟前
git 大仓库拉取卡顿问题
前端
前端那点事6 分钟前
告别低级冗余!10个前端原生高阶技巧,让代码更优雅、性能更出众
前端·vue.js
hexu_blog6 分钟前
前端vue后端java如何实现证件照功能
前端·javascript·vue.js
豹哥学前端6 分钟前
前端 LocalStorage 实战:从入门到熟练,一篇就够了
前端·javascript·面试
用户40189933422847 分钟前
第 11 章 MCP 协议与集成
前端
Southern Wind15 分钟前
谷记账——一个 Vue 3 批次记账 App
前端·javascript·vue.js
A923A42 分钟前
【javaScript 原型精讲】
javascript·原型·原型链
卷帘依旧1 小时前
手写throttle
javascript
lzhdim1 小时前
SQL 入门 14:SQL 触发器与事件:自动化数据处理
linux·前端·数据库·sql·自动化
其实防守也摸鱼1 小时前
Sqlmap:选取sqli-labs中less-8进行sqlmap注入测试
前端·css·网络·安全·web安全·less·sqli-labs