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

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

相关推荐
2501_944711431 天前
构建 React Todo 应用:组件通信与状态管理的最佳实践
前端·javascript·react.js
困惑阿三1 天前
2025 前端技术全景图:从“夯”到“拉”排行榜
前端·javascript·程序人生·react.js·vue·学习方法
苏瞳儿1 天前
vue2与vue3的区别
前端·javascript·vue.js
weibkreuz1 天前
收集表单数据@10
开发语言·前端·javascript
hboot1 天前
别再被 TS 类型冲突折磨了!一文搞懂类型合并规则
前端·typescript
在西安放羊的牛油果1 天前
浅谈 import.meta.env 和 process.env 的区别
前端·vue.js·node.js
鹏北海1 天前
从弹窗变胖到 npm 依赖管理:一次完整的问题排查记录
前端·npm·node.js
布列瑟农的星空1 天前
js中的using声明
前端
薛定谔的猫21 天前
Cursor 系列(2):使用心得
前端·ai编程·cursor
用户904706683571 天前
后端问前端:我的接口请求花了多少秒?为啥那么慢,是你慢还是我慢?
前端