• js监听页面或元素scroll事件,滚动到底部或顶部


    在这里插入图片描述

    基本原理:

    1、滚动到底部
    元素的滚动距离 + 元素的可视距离 == 元素的滚动条总距离
    
    2、滚动到顶部
    元素的滚动距离  == 0
    
    • 1
    • 2
    • 3
    • 4
    • 5

    监听页面滚动

    <!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>Scroll Demo</title>
      </head>
    
      <body>
        <style>
          .box {
            height: 5000px;
            text-align: center;
          }
        </style>
    
        <div class="box" id="box">打开控制台查看</div>
    
        <!-- 引入节流方法 -->
        <script src="https://cdn.jsdelivr.net/npm/throttle-debounce@5.0.0/umd/index.min.js"></script>
    
        <script>
          // 滚动方向枚举值
          const DIRECTION_ENUM = {
            DOWN: "down",
            UP: "up",
          };
    
          // 距离顶部或底部的阈值
          const threshold = 20;
    
          // 记录前一个滚动位置
          let beforeScrollTop = 0;
    
          function handleScroll() {
            // 距顶部
            var scrollTop =
              document.documentElement.scrollTop || document.body.scrollTop;
            // 可视区高度
            var clientHeight =
              document.documentElement.clientHeight || document.body.clientHeight;
            // 滚动条总高度
            var scrollHeight =
              document.documentElement.scrollHeight || document.body.scrollHeight;
    
            // 打印数值
            console.table([
              {
                label: "距顶部",
                value: scrollTop,
              },
              {
                label: "可视区高度",
                value: clientHeight,
              },
              {
                label: "滚动条总高度",
                value: scrollHeight,
              },
              {
                label: "距顶部 + 可视区高度",
                value: scrollTop + clientHeight,
              },
            ]);
    
            // 确定滚动方向
            let direction = DIRECTION_ENUM.DOWN;
            if (beforeScrollTop > scrollTop) {
              direction = DIRECTION_ENUM.UP;
            }
    
            // 通过滚动方向判断是触底还是触顶
            if (direction == DIRECTION_ENUM.DOWN) {
              // 滚动触底
              if (scrollTop + clientHeight + threshold >= scrollHeight) {
                console.log("滚动触底");
              }
            } else {
              // 滚动到顶部
              if (scrollTop <= threshold) {
                console.log("滚动到顶部");
              }
            }
    
            beforeScrollTop = scrollTop;
          }
    
          // 滚动节流
          const throttleHandleScroll = throttleDebounce.throttle(
            1000,
            handleScroll
          );
    
          // 监听滚动
          window.addEventListener('scroll', throttleHandleScroll);
    
        </script>
      </body>
    </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
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101

    同理,也可以监听元素的滚动

    <style>
      .box-wrap {
        height: 500px;
        overflow-y: auto;
      }
    
      .box {
        height: 5000px;
        text-align: center;
      }
    </style>
    
    <div class="box-wrap" id="box">
      <div class="box">打开控制台查看</div>
    </div>
    
    <script>
      // 监听滚动
      let box = document.querySelector("#box");
      box.addEventListener("scroll", function (e) {
        let scrollTop = e.target.scrollTop;
        let clientHeight = e.target.clientHeight;
        let scrollHeight = e.target.scrollHeight;
    
        // 打印数值
        console.table([
          {
            label: "距顶部",
            value: scrollTop,
          },
          {
            label: "可视区高度",
            value: clientHeight,
          },
          {
            label: "滚动条总高度",
            value: scrollHeight,
          },
          {
            label: "距顶部 + 可视区高度",
            value: scrollTop + clientHeight,
          },
        ]);
      });
    </script>
    
    • 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

    判断触底需要注意的点:

    • 滚动时需要区分向上滚动还是向下滚动
    • 滚动时可以设置一个阈值,并非完全触底或触顶才触发
    • 滚动事件需要做节流操作,以免短时间内被多次触发

    在线Demo

    参考
    js 监听页面滚动到底部,监听可视区域滚动到底部

  • 相关阅读:
    自动抓取app数据的攻与防
    飞桨产业级开源模型库:加速企业AI任务开发与应用
    Java8函数式编程-lambda表达式与stream流
    webpack:css代码提取插件extract-text-webpack-plugin和mini-css-extract-plugin
    某评登录与数据获取
    C++ 常量
    Pycharm 专业版与社区版的区别
    现代PCB生产工艺——加成法、减成法与半加成法
    【JavaEE进阶系列 | 从小白到工程师】Math类与System类的常用方法使用
    香港金融交易解决方案提供商【移动财经】申请840美元纳斯达克IPO上市
  • 原文地址:https://blog.csdn.net/mouday/article/details/125444003