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

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

相关推荐
JarvanMo5 分钟前
Fluwx 6.0 预览版本他来了
前端
KaMeidebaby7 分钟前
卡梅德生物技术快报|单 B 细胞抗体筛选服务:技术架构、流程实现与数据验证
前端·数据库·其他·百度·新浪微博
爱勇宝10 分钟前
别焦虑,也别躺平:给年轻程序员的一封信
前端·后端·架构
OpenTiny社区12 分钟前
2026 OpenTiny NEXT 产品调研启动!
前端·开源·github
德莱厄斯14 分钟前
GIS 开发要变天?看看高德空间智能给我们带来了什么!
前端·gis·agent
JarvanMo16 分钟前
Flutter.Dart的主构造函数(primary constructor)可能马上就要来了
前端
用户658681803384043 分钟前
一个前端CLAUDE.md
前端
前端那点事44 分钟前
彻底解决KeepAlive缓存乱象!Vue3精细化按需缓存+路径重置终极方案
前端·vue.js
前端那点事44 分钟前
Vue 的 template 标签不能用 v-show?底层机制+踩坑复盘+生产级解决方案
前端·vue.js
前端那点事1 小时前
从零落地前端性能优化:全链路避坑+实战调优方案
前端·vue.js