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

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

相关推荐
Ulyanov13 小时前
《PySide6 GUI开发指南:QML核心与实践》 第二篇:QML语法精要——构建声明式UI的基础
java·开发语言·javascript·python·ui·gui·雷达电子对抗系统仿真
聚美智数13 小时前
企业实际控制人查询-公司实控人查询
android·java·javascript
SoaringHeart14 小时前
Flutter进阶:用OverlayEntry 实现所有弹窗效果
前端·flutter
IT_陈寒16 小时前
Vite静态资源加载把我坑惨了
前端·人工智能·后端
herinspace16 小时前
管家婆实用贴-如何分离和附加数据库
开发语言·前端·javascript·数据库·语音识别
小码哥_常16 小时前
从MVC到MVI:一文吃透架构模式进化史
前端
嗷o嗷o16 小时前
Android BLE 的 notify 和 indicate 到底有什么区别
前端
豹哥学前端16 小时前
别再背“var 提升,let/const 不提升”了:揭开暂时性死区的真实面目
前端·面试
lar_slw17 小时前
k8s部署前端项目
前端·容器·kubernetes
这里不能睡觉17 小时前
js 实现 Blob、File、ArrayBuffer、base64、URL 之间互转
javascript