滚动条默认不展示,滑动上去展示滚动条实现

背景

我们再写项目的时候UI 会设计一些规范,比如滚动条的,他们的设计规范是 默认有滚动条的不展示滚动条,当鼠标划上去才展示滚动条,这个跟我们的浏览器滚动条样式有冲突, 我们默认的滚动条样式是 默认展示出来的,

默认滚动条展示如下

js 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .main {
      height: 300px;
      overflow-y: auto;
      border: 1px solid red;
    }

    .item {
      height: 40px;
      width: 100%;
      background-color: #df1e1e;
      margin-bottom: 20px;
      color: black;
    }

    
  </style>
</head>

<body>
  <div class="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</body>

</html>

可见默认展示的,我们要做的就是要其默认不展示,鼠标滑上去再展示

实现如下

js 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .main {
      height: 300px;
      overflow-y: auto;
      border: 1px solid red;
    }

    .item {
      height: 40px;
      width: 100%;
      background-color: #df1e1e;
      margin-bottom: 20px;
      color: black;
    }

    :root {
      --color-border-1: #888;
      /* 深灰色 - 滑块激活状态 */
      --color-border-2: #ddd;
      /* 浅灰色 - 滑块默认悬停状态 */
    }


    body.scroller-hover::-webkit-scrollbar,
    body.scroller-hover *::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    body.scroller-hover::-webkit-scrollbar-corner,
    body.scroller-hover *::-webkit-scrollbar-corner {
      background-color: rgba(0, 0, 0, 0);
    }

    body.scroller-hover:hover::-webkit-scrollbar-track-piece,
    body.scroller-hover *:hover::-webkit-scrollbar-track-piece {
      background-color: rgba(0, 0, 0, 0);
      border-radius: 6px;
    }

    body.scroller-hover:hover::-webkit-scrollbar-thumb,
    body.scroller-hover *:hover::-webkit-scrollbar-thumb {
      background-color: var(--color-border-2);
      border-radius: 6px;
    }

    body.scroller-hover:hover::-webkit-scrollbar-thumb:active,
    body.scroller-hover:hover::-webkit-scrollbar-thumb:hover,
    body.scroller-hover *:hover::-webkit-scrollbar-thumb:active,
    body.scroller-hover *:hover::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-border-1);
    }
  </style>
</head>

<body class="scroller-hover">
  <div class="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</body>

</html>

注意我们再 body上 设置的 scroller-hover,此时效果如下 ,默认不展示滚动条,鼠标画上去展示,

总结

以上我们实现了滚动条的全局优化,请注意 body的类名配置,这样全局的所有滚动条 均会按照此逻辑展示

相关推荐
超人不会飛11 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦14 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想17 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z25 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982430 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴36 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干39 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗41 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder1 小时前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder1 小时前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github