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

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

相关推荐
小居673几秒前
Elpis 一个能够自定义的nodejs前后端框架
前端
特别橙的橙汁2 分钟前
Node.js 调用可执行文件时的 stdout 缓冲区问题
前端·node.js·swift
yiranlater2 分钟前
点云八叉树处理
前端
榴莲CC9 分钟前
VK1620 抗噪数显LED驱动芯片数码管显示IC内置 RC振荡器/8级整体亮度可调
前端
@Autowire12 分钟前
Layout-box-sizing是 CSS 中控制元素盒模型计算方式的核心属性,直接决定了元素的 width/height 是否包含内边距和边框
前端
alamhubb13 分钟前
反感pnpm的全链路污染?可以了解下这个对原项目零侵入,零修改完全兼容npm的monorepo工具
前端·javascript·node.js
叁两14 分钟前
“死了么”用户数翻800倍,估值近1亿,那我来做个“活着呢”!
前端·人工智能·产品
2501_9481949835 分钟前
RN for OpenHarmony AnimeHub项目实战:正在热播页面开发
javascript·react native·react.js
2501_9445210036 分钟前
rn_for_openharmony商城项目app实战-语言设置实现
javascript·数据库·react native·react.js·harmonyos
AdleyTales42 分钟前
vscode识别不了@提示找不到路径解决
前端·javascript·vscode