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

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

相关推荐
阿里巴啦1 分钟前
用React+Three.js 做 3D Web版搭建三维交互场景:模型的可视化摆放与轻量交互
前端·react·three.js·模型可视化·web三维·web三维交互场景
Liu.77411 分钟前
vue3组件之间传输数据
前端·javascript·vue.js
|晴 天|11 分钟前
前端闭包:从概念到实战,解锁JavaScript高级技能
开发语言·前端·javascript
开发者小天13 分钟前
react的拖拽组件库dnd-kit
前端·react.js·前端框架
用户44455436542622 分钟前
在Android开发中阅读源码的指导思路
前端
用户542778485154025 分钟前
ESM 模块(ECMAScript Module)详解
前端
全栈前端老曹40 分钟前
【ReactNative】核心组件与 JSX 语法
前端·javascript·react native·react.js·跨平台·jsx·移动端开发
用户54277848515401 小时前
JavaScript 闭包详解:由浅入深掌握作用域与内存管理的艺术
前端
小小黑0071 小时前
快手小程序-实现插屏广告的功能
前端·javascript·小程序
用户54277848515401 小时前
闭包在 Vue 项目中的应用
前端