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

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

相关推荐
讯方洋哥20 分钟前
应用冷启动优化
前端·harmonyos
speedoooo24 分钟前
未来的App不再需要菜单栏?
前端·ui·容器·小程序·web app
猿究院_xyz1 小时前
微信小程序与echarts联动安卓真机测试出现黑色阴影
前端·javascript·微信小程序·小程序·echarts
IT_陈寒1 小时前
Redis性能翻倍的5个冷门技巧,90%开发者都不知道的深度优化方案
前端·人工智能·后端
清水迎朝阳1 小时前
监听 edge大声朗读 样式变化
前端·edge
油丶酸萝卜别吃1 小时前
修改chrome配置,关闭跨域校验
前端·chrome
刺客xs1 小时前
Qt-----QSS样式表
开发语言·javascript·qt
m0_740043732 小时前
3、Vuex-Axios-Element UI
前端·javascript·vue.js
阿蒙Amon2 小时前
JavaScript学习笔记:14.类型数组
javascript·笔记·学习
风止何安啊2 小时前
一场组件的进化脱口秀——React从 “类” 到 “hooks” 的 “改头换面”
前端·react.js·面试