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

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

相关推荐
我是何平12 小时前
js中,什么是快速排序(Quick Sort)
前端
爱勇宝12 小时前
别再混用了!import.meta.env 与 process.env 的本质差异一次讲透
前端·javascript·vue.js
清粥油条可乐炸鸡12 小时前
tanstack query的基本使用
前端·axios
路修远i12 小时前
基于SSE的AI对话流式结构
前端·javascript
攀登的牵牛花13 小时前
前端向架构突围系列 - 跨端技术 [11 - 1]:JSBridge 原理与 Hybrid设计
前端
用户57573033462413 小时前
从 LocalStorage 待办清单到 CSS 核心机制:一次搞懂数据持久化、继承与盒模型陷阱
前端
codingWhat13 小时前
前端组件库开发实践:从零到发布
前端·npm·vite
cxxcode13 小时前
浏览器模块加载与 Webpack 打包原理
前端
兆子龙13 小时前
React Compiler 来了:少写 useMemo,照样稳
前端·架构
用户54330814419413 小时前
Manifest V3 实战:从补天网站逆向到 Chrome 扩展开发全记录
前端·后端