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

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

相关推荐
仰泳之鹅11 分钟前
【杂谈】使用Edge浏览器下载文件显示“Microsoft Defender SmartScreen 已阻止此不安全文件”的解决方法
前端·edge
万邦科技Lafite22 分钟前
小红书评论数据一键获取,item_reviewAPI接口讲解
大数据·前端·数据库·chrome·电商开放平台
戌中横27 分钟前
JavaScript 对象
java·开发语言·javascript
meng半颗糖1 小时前
vue3+tpescript 点击按钮跳转新页面直接通过链接预览word
前端·vue.js·word
击败不可能2 小时前
vue做任务工具方法的实现
前端·javascript·vue.js
觉醒大王2 小时前
医学好投的普刊分享
前端·论文阅读·深度学习·学习·自然语言处理·学习方法
小二·2 小时前
Python Web 开发进阶实战:AI 编排引擎 —— 在 Flask + Vue 中构建低代码机器学习工作流平台
前端·人工智能·python
【赫兹威客】浩哥2 小时前
【赫兹威客】框架模板-前端bat脚本部署教程
前端·vue.js
sww_10262 小时前
智能问数系统(二):数据分析师Python
java·前端·python
爱上妖精的尾巴2 小时前
7-13 WPS JS宏 this 用构造函数自定义类-2,调用内部对象必须用this
开发语言·javascript·wps·jsa