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

背景

我们再写项目的时候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的类名配置,这样全局的所有滚动条 均会按照此逻辑展示

相关推荐
灵感__idea17 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript