• 二、CSS自制浏览器滑动条

    一、滑动条

    思路：首先我们需要想清楚，大体思路应该是把浏览器默认滑动条隐藏，然后自己手写一个好看的滑动条，主要是做出和浏览器滑动条一样的上下移动的效果出来。

    解释：如下图所示，有一个盒子高度是100px，里面有一个（100+100）px的内容，也就是200px，然后它的右侧是一个滑动条。可以根据对等比例设置滑动条的高度，比如设内容区100px时，滑动条100px，此时正好不显示滑动条，此时是一个边界。
    当内容区域超过100px，例如达到250px，相当于内容区扩大2.5倍数，滑动条缩小2.5倍到40px，然后当滑动100px时（document.scrollTop获取该值）
    其占内容区总长度的40%，对应的滑动条向下移动的距离40%（document.clientHeight*40%）即可
    在这里插入图片描述

    1.1 隐藏不同浏览器的滑动条

        /* 把火狐浏览器设置成隐藏滑动条，这样的目的是显示我们自己的滑动条 */
    *{
      scrollbar-width: none;
    }
    /* 把edge、chrome、Safari设置成隐藏滑动条，这样的目的是显示我们自己的滑动条 */
    *::-webkit-scrollbar {
      display: none;
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    1.2 自制滑动条

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 把火狐浏览器设置成隐藏滑动条，这样的目的是显示我们自己的滑动条 */
    *{
      scrollbar-width: none;
    }
    /* 把edge、chrome、Safari设置成隐藏滑动条，这样的目的是显示我们自己的滑动条 */
    *::-webkit-scrollbar {
      display: none;
    }
    #one {
      position: relative;
      overflow: auto;
      -ms-overflow-style: none;
      overflow: auto;
      background-color: yellow;
      width: 300px;
      /* height: 100px; */
    }
    #two {
      position: absolute;
      transform: translateY(0);
      right: 0;
      top: 0px;
      height: 100px;
      width: 10px;
      background-color: #0003;
    border-radius: 10px;

    }
  </style>
</head>

<body>
  <div style="position: relative;width: 300px;">
    <div id="one">
      <!-- 设置内容块占用位置 -->
      <div style="height: 299px;">
        Hendrerit lorem lorem nonumy ut ut sadipscing sed dolore. Diam aliquyam dolor sea. Vero takimata in at iusto duis ex doming vero elitr ut. Dolor consequat et nonumy tincidunt kasd stet consetetur labore dolor sea magna placerat duis et. Euismod et kasd option vel ut sadipscing no ipsum diam lorem eirmod nonumy. In ipsum nonumy lorem et tincidunt. Takimata aliquyam diam at ea nulla ipsum dolor ullamcorper et et duis invidunt et tation. Cum sed commodo kasd invidunt liber at nonumy amet est magna et gubergren dolore sit. Sed amet molestie liber ut accumsan et iusto diam stet sit ipsum dolore id. Tempor erat soluta ut consetetur lobortis stet sed. Est eirmod voluptua gubergren ex et sea amet magna eu ut sed aliquyam. Clita erat ullamcorper aliquyam dolore eos suscipit accusam ullamcorper et nonumy consetetur lorem et in diam consectetuer magna. Labore nobis rebum stet gubergren eos dignissim lorem. Nonumy invidunt gubergren eum takimata accumsan sanctus sanctus ut at te suscipit duis et consequat tempor diam vero amet.
      
      </div>
    </div>
    <!-- two是自制滑动条 -->
    <div id="two"></div>
  </div>
</body>
<script>
  var one = document.getElementById('one')
  var two = document.getElementById('two')
  const longHeight = one.scrollHeight //加上隐藏的总高度
  const showHeight = one.clientHeight// 表面上显示的高度
  const oneHeight = showHeight
  // 根据对等比例设置滑动条的高度，比如设内容区100px时，滑动条100px，此时正好不显示滑动条，此时是一个边界。
  // 当内容区域超过100px，例如达到250px，相当于内容区扩大2.5倍数，滑动条缩小2.5倍到40px，然后当滑动100px时（document.scrollTop）
  //其占内容区总长度的40%，对应的滑动条向下移动表面高度的40%（document.clientHeight*40%）即可
  console.log(longHeight,showHeight,100/(longHeight/showHeight))
  if(longHeight>showHeight){
    var lastUse;
    lastUse = two.style.height=oneHeight/(longHeight/showHeight)+'px';
    two.style.height=lastUse+'px';
  }
  one.onscroll = function () {
    var result = showHeight * (one.scrollTop / longHeight)
    
    two.style.transform="translateY(" + result + "px)"
  }
</script>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76

    效果图：
    在这里插入图片描述

  • 相关阅读:
    漫谈测试成长之探索——测试汇报
    Linux(Centos)防火墙允许通过端口增加操作记录
    Dockerfile 语法教程
    GNU-ncurses库简介
    dds:publish
    服务器带宽跑满是什么原因
    使用位运算技巧比较两个数中较大的数
    用Go实现网络流量解析和行为检测引擎
    力扣每日一练之二分查找Day10
    XD6500S— LoRa SIP模块芯片 集成了射频前端和LoRa射频收发器SX1262 应用温湿度传感器 资产跟踪等
  • 原文地址：https://blog.csdn.net/weixin_46765649/article/details/128136187