监听滚动事件, 判断页面是否触底

已于 2023-11-17 14:04:04 修改
阅读量3.2k 收藏 3
点赞数
文章标签： 前端 javascript 开发语言
于 2023-11-17 11:38:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Guojun19900715/article/details/134459493
版权

监听滚动事件, 判断页面是否触底

监听页面是否触底

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <p>21</p>
    <p>22</p>
    <p>23</p>
    <p>24</p>
    <p>25</p>
    <p>26</p>
    <p>27</p>
    <p>28</p>
    <p>29</p>
    <p>30</p>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <p>34</p>
    <p>35</p>
    <p>36</p>
    <p>37</p>
    <p>38</p>
    <p>39</p>
    <p>40</p>
    <p>41</p>
    <p>42</p>
    <p>43</p>
    <p>44</p>
    <p>45</p>
    <p>46</p>
    <p>47</p>
    <p>48</p>
    <p>49</p>
    <p>50</p>
  </div>
  <script>
    let flag = false; // false: 页面未触底; true: 页面触底了
    function handleScroll () {
      let scrollTop = document.documentElement.scrollTop; // 页面卷去高度
      let screenHeight = window.innerHeight; // 可视窗口高度
      let scrollHeight = document.documentElement.scrollHeight; // Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
      // 页面卷去的高度 + 可视窗口的高度 === 页面高度 => 说明页面触底了
      if (screenHeight + scrollTop === scrollHeight) {
        flag = true;
      } else {
        flag = false;
      }
      console.log('flag', flag);
    }
    window.addEventListener("scroll", handleScroll, true); // 监听页面滚动事件
  </script>
</body>

监听元素是否触底

  • 参考文献 https://zhuanlan.zhihu.com/p/469415873?utm_id=0
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #box {
      height: 300px;
      width: 300px;
      overflow-y: auto;
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <div id="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
  </div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <script>
    // 判断用户是否滚动到底部
    // 本质上就是当元素出现滚动条时，判断当前元素出现的高度 + 滚动条高度 = 元素本身的高度(包含隐藏部分)。
    // element.scrollHeight - element.scrollTop === element.clientHeight
    let flag = false
    function handleScroll (e) {
      let element = document.getElementById('box')
      let scrollTop = element.scrollTop; // 元素卷去高度
      let clientHeight = element.clientHeight; // 元素出现高度
      let scrollHeight = element.scrollHeight; // Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
      console.log('scrollTop', scrollTop)
      console.log('clientHeight', clientHeight)
      console.log('scrollHeight', scrollHeight)
      if (clientHeight + scrollTop === scrollHeight) {
        flag = true;
      } else {
        flag = false;
      }
      console.log('flag', flag);
    }
    window.addEventListener("scroll", handleScroll, true); // 监听页面滚动
  </script>
</body>

</html>
guojun@07
关注
elementUI无线滚动+监听滚动条触底
shengyin714959的博客
04-23 611
在这两天的开发任务中遇到了一个很奇葩的问题，并且它是偶发性的，大致情况是在某些电脑上，elementUI无线滚动总是正常执行的，但是在个别电脑上会出现偶发无线滚动不触发的情况，在经过大量的场景模拟下发现，出现无线滚动不触发的情况大致和渲染时间的长短有关（猜想，因为我确实没有模拟出必现的情况）。
Js判断H5上下滑动方向及滑动到顶部和底部判断
weixin_33905756的博客
06-13 978
昨天一位做移动端H5开发的同事说，H5滑动方向要实时判断向下还是向上，但判断是否滑动到底部时判断有问题一直没解决，于是就去问度娘，搜了很多资料，大部分有重复，于是根据大家的资料借鉴学习，在大家的基础上写了一个小例子。功能主要时可以实时的判断上下滑动的方向，是否滑动到底部或顶部来做某些事件触发。例子中有使用到其他博客上的内容，如原作者看到请勿怪，如果例子中有错误的请大...
HTML5移动端通过touch事件判断手势方向及页面到达底部
52.0Hz的博客
09-15 5479
通过HTML5的触摸事件(touchstart、touchmove和touchend)判断手指在屏幕上滑动的方向（上|下），以及判断可滚动区域是否到达底部，到达底部后加载更多数据。
vue3 滚动条触底监听
前端小陈的成长记录
03-01 1916
vue3 滚动条触底监听
监听滚动条和触底判断
weixin_48123820的博客
05-07 2614
在滚动条滚动的过程中，每次只要滚动条的位置发生了变化，都会触发一次监听的方法。通过@scroll事件进行监听，回调参数为事件。避免一次性拉取过多数据造成渲染时卡顿。常用于滚动条滚动时懒加载数据，或者上拉到顶触发数据刷新。避免重复触发，最好是加个防抖。
JS监听页面滚动到底部事件
weixin_33877885的博客
08-18 843
废话不说，直接上代码，放心我这个是最好的,直接放到js脚本里，直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeig...
监听滚动条触底
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
06-13 2308
监听滚动条触底。作为记录。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
js监听滚动条判断滚动条触底
九段刀客的博客
09-28 3027
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{
angular6 滚动条判断是否触底.md
06-06
angular6，div 滚动条判断是否触底，用于滚动加载数据。
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
12-13
本文实例讲述了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法。...而且这种做法，会让你更加难以判断是否滑动到底部了，特别是当你并不是整页滚动，而是页面中拥有一个fixed固定的头部时。 在.vue的组件
vue elementUI 表格组件添加滚动触底监听事件
夕降巫咸的博客
06-25 347
vue elementUI 表格组件 添加 滚动触底监听事件
vue 纯js监听滚动条到底部的实例讲解
12-11
在网页中，我们会遇到很多在滚动条到底部的时候有数据正在加载的事件，那么怎样用vue去实现这样的内容呢？本篇只给出一个雏形，结合vue的生命周期用纯javascript写的一个监听函数，后续操作数据库的部分暂且不议。 1、怎样用纯js判断滚动条是否到底部？ 先了解几个关键词： （1）滚动条到顶部的位置：scrollTop （2）当前窗口内容可视区：windowHeight （3）滚动条内容的总高度：scrollHeight 触发监听的函数是： [removed] = function()｛...｝ 判断到底部的等式: scrollTop+windowHeight=scrollHei
Vue组件实现触底判断
10-16
总结来说，Vue组件实现触底判断的核心在于监听滚动事件，判断滚动位置是否到达页面底部，并通过父组件传递的回调函数进行相应的操作。在实际应用中，为了优化性能，应考虑使用节流或防抖函数。这个简单的示例展示了...
scroll滚动事件如何监听页面是否滚动到底部
m0_70015558的博客
07-07 4211
监听是否滚动到底部多数应用在加载更多之类的功能。话不多说，直接上菜。考虑vue渲染规则 需要在元素渲染后执行scroll监听 否则获取不到对应dom节点 所以需要配合使用 $nextTick()cont是监听区域，‘scroll’是添加事件，this.scroll是方法。 scroll判断是否到底部 如果没有要加载数据了，就可以把scroll事件移除了 这就是监听是否滚动到底部的全部内容了。描述如有错误，欢迎指正！.........
监听页面滚动到底部
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
05-17 2249
如果页面还有其他功能会改变页面数据 比如：筛选列表数据 会重新生成新的列表。scrollRef.value.scrollTop = 0 //滚动到顶部。page.value = 1 // 恢复初始值。需要清除当前的分页状态。
H5 中监听页面滚动事件，判断滚动方向的方法
热门推荐
Alex_Zhao 的博客
07-07 2万+
在做 H5 开发的时候，有时候需要监听页面的滚动的事件，根据页面滚动方向的不同来进行不同的操作，通常是判断页面是向上滚动还是向下滚动，那么怎么判断呢，只需要使用下面的区区几十行代码即可。
移动端滚动加载数据判断是否滚动到页面底部
一枚不断学习的小码农一枚~
12-07 7853
获取scrollTop，scrollTop是可见窗口顶端与body对象最顶端的距离，即滚动鼠标或手指滑动页面时，隐藏的页面高度（滚动的距离）。documentElement对应的是html标签，body对应的body标签，在标准w3c下，document.body.scrollTop恒为0，需要用documnet.documentElement.scrollTop来代替，两者只有一个生效,始终有一个
js 监听页面滚动到底部，监听可视区域滚动到底部
PrimaryColor
03-18 5828
全局页面body上的底部监听： window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; var scr
js监听页面滚动到底部（部分手机监听滚动底部无效果处理）
最新发布
liuriri的博客
12-19 237
【代码】js监听页面滚动到底部（部分手机监听滚动底部无效果处理）
pc端如何判断页面滚动触底
11-13
在PC端判断页面是否滚动到底部通常通过监听滚动事件，并检查滚动条的位置或高度与视口的高度进行比较。以下是基本步骤： 1. 首先，在JavaScript中获取窗口的`scrollHeight`（文档总高度，包括未加载的内容）和`clientHeight`（可视区域高度）。 ```javascript var documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight; var windowHeight = window.innerHeight || document.documentElement.clientHeight; ``` 2. 当用户滚动时，再次计算当前滚动位置（scrollTop），并将其与`documentHeight - windowHeight`比较。 ```javascript window.addEventListener('scroll', function() { var scrollPosition = window.pageYOffset || document.documentElement.scrollTop; // 确保兼容所有浏览器 if (scrollPosition + windowHeight === documentHeight) { // 页面已经滚动到底部 console.log('页面已滚动到底部'); // 在这里执行你需要的操作，如加载更多内容等 } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值