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

背景

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

相关推荐
知识分享小能手几秒前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
code_YuJun几秒前
nginx 配置相关
前端·nginx
对不起初见2 小时前
PlantUML 完整教程:从入门到精通
前端·后端
东方掌管牛马的神2 小时前
oh-my-zsh 配置与使用技巧
前端
你的人类朋友2 小时前
HTTP请求结合HMAC增加安全性
前端·后端·安全
aidingni8882 小时前
掌握 TCJS 游戏摄像系统:打造动态影院级体验
前端·javascript
有梦想的攻城狮2 小时前
从0开始学vue:npm命令详解
前端·vue.js·npm
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 23 - Watch:基础实现
前端·javascript·vue.js
FogLetter3 小时前
TypeScript 泛型:让类型也拥有“函数式”超能力
前端·typescript