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

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

相关推荐
T***u33310 分钟前
前端Server Components性能分析 Server Components架构原理
前端
Q***f63512 分钟前
前端动画性能优化,60fps实现技巧
前端
艾莉丝努力练剑14 分钟前
【自动化测试实战篇】Web自动化测试实战:从用例编写到报告生成
前端·人工智能·爬虫·python·pycharm·自动化·测试
Mintopia14 分钟前
💥 Trae Solo 编程 vs. Cursor:新机遇与新挑战
前端·人工智能·trae
Sapphire~18 分钟前
JavaScript 数组方法的系统方法: 分类理解 + 形象化记忆的方法
javascript
Mintopia19 分钟前
🌌 长上下文 AIGC 的性能瓶颈:Web 端技术的突破与妥协
前端·人工智能·trae
天蓝色的鱼鱼23 分钟前
前端小白Express入门:初识Web框架与项目搭建
前端·node.js·express
一只小阿乐31 分钟前
react 点击事件注意事项
前端·javascript·react.js·react
Mike_jia37 分钟前
EMQX:开源MQTT消息中间件王者,百万级物联网连接的首选引擎
前端
xiaoxue..42 分钟前
深入理解JavaScript中的深拷贝与浅拷贝:内存管理的艺术
开发语言·前端·javascript·面试