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 分钟前
老王请假、客户开喷、我救火:一场递归树的性能突围战
前端·javascript·性能优化
搬砖的阿wei4 分钟前
JavaScript 请求数据的四种方法:Ajax、jQuery 、Fetch和 Axios
javascript·ajax·axios·jquery
梵得儿SHI6 分钟前
Vue Router 进阶实战:嵌套路由 / 导航守卫 / 懒加载全解析(含性能优化 + 避坑指南)
前端·javascript·vue.js·嵌套路由与命名视图·实现复杂页面结构·子路由配置要点·全局/路由/组件三种守卫用法
xjt_090111 分钟前
Chrome 截取 整个网页(全页截图 非滚动手动截图)
前端·chrome
AC赳赳老秦1 小时前
DeepSeek教育科技应用:智能生成个性化学习规划与知识点拆解教程
前端·网络·数据库·人工智能·学习·matplotlib·deepseek
布列瑟农的星空9 小时前
Playwright使用体验
前端·单元测试
卤代烃9 小时前
🦾 可为与不可为:CDP 视角下的 Browser 控制边界
前端·人工智能·浏览器
_XU9 小时前
AI工具如何重塑我的开发日常
前端·人工智能·深度学习
C_心欲无痕10 小时前
vue3 - defineExpose暴露给父组件属性和方法
前端·javascript·vue.js·vue3
鹿人戛10 小时前
HarmonyOS应用开发:相机预览花屏问题解决案例
android·前端·harmonyos