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

已于 2023-11-17 14:04:04 修改
阅读量3k 收藏 3
点赞数
文章标签： 前端 javascript 开发语言
于 2023-11-17 11:38:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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
关注
angular6 滚动条判断是否触底.md
06-06
angular6，div 滚动条判断是否触底，用于滚动加载数据。
Js判断H5上下滑动方向及滑动到顶部和底部判断
weixin_33905756的博客
06-13 933
昨天一位做移动端H5开发的同事说，H5滑动方向要实时判断向下还是向上，但判断是否滑动到底部时判断有问题一直没解决，于是就去问度娘，搜了很多资料，大部分有重复，于是根据大家的资料借鉴学习，在大家的基础上写了一个小例子。功能主要时可以实时的判断上下滑动的方向，是否滑动到底部或顶部来做某些事件触发。例子中有使用到其他博客上的内容，如原作者看到请勿怪，如果例子中有错误的请大...
移动端h5页面监听用户手势滑动
面对疾风吧
10-11 4029
直接整个代码复制丢进去运行; 需要加入自己的操作可以在最底下 alert(‘XX’)的地方加 var h = document.documentElement.clientHeight, mybody = document.getElementsByTagName('body')[0]; mybody.style.height = h + 'px'; //返回角度 function GetSlideAngle(d
HTML5移动端通过touch事件判断手势方向及页面到达底部
52.0Hz的博客
09-15 5396
通过HTML5的触摸事件(touchstart、touchmove和touchend)判断手指在屏幕上滑动的方向（上|下），以及判断可滚动区域是否到达底部，到达底部后加载更多数据。
UNI-APP_监听页面滚动h5监听页面滚动
小歪博客
08-08 1692
1.在uniapp中，使用生命周期onPageScroll()2.在普通h5页面中使用原生js进行监听。
H5 中监听页面滚动事件，判断滚动方向的方法
热门推荐
Alex_Zhao 的博客
07-07 2万+
在做 H5 开发的时候，有时候需要监听页面的滚动的事件，根据页面滚动方向的不同来进行不同的操作，通常是判断页面是向上滚动还是向下滚动，那么怎么判断呢，只需要使用下面的区区几十行代码即可。
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
12-13
本文实例讲述了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法。...而且这种做法，会让你更加难以判断是否滑动到底部了，特别是当你并不是整页滚动，而是页面中拥有一个fixed固定的头部时。 在.vue的组件
Vue组件实现触底判断
10-16
总结来说，Vue组件实现触底判断的核心在于监听滚动事件，判断滚动位置是否到达页面底部，并通过父组件传递的回调函数进行相应的操作。在实际应用中，为了优化性能，应考虑使用节流或防抖函数。这个简单的示例展示了...
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
11-20
在 Vue 中，可以通过监听滚动事件并获取滚动区域的相关属性来判断是否滚动到底部。以下是一个简单的示例： ```javascript isScrollBottom() { // 获取滚动区域的 DOM 元素 this.box = this.$refs.chatListWrapper...
滚动条的监听与内容随着滚动条动态加载的实现
08-31
在上述代码中，监听滚动条事件的回调函数会判断当前滚动位置加上可视区域的高度是否等于整个文档的高度，如果是，那么就意味着用户已经滚动到了页面底部，此时就会调用`addLi()`函数来加载更多内容。 ### 注意事项 ...
【VUE】JS监听鼠标上下滚动事件
sunshineTing2的博客
07-06 3845
【代码】【VUE】JS监听鼠标上下滚动事件。
如何捕捉H5端的快速滑动动作
qq_36990322的博客
04-11 710
在一些H5触摸屏的项目需求中，经常会出现需要捕捉手指在屏幕中快速滑动动作的需求。然而，往往这个需求也同时需要兼容慢慢滑动这个需求。比如picker相关系列的组件，都有这个功能点。那么，他们是怎么实现的呢？
移动端H5监听 上拉触底 懒加载
u013361179的博客
06-09 1054
移动端H5监听 上拉触底 懒加载
vue写h5触底翻页
最新发布
z001126的博客
02-19 634
我们先写一个触底执行事件的demo，首先要有一个盒子给他添加一个滚动监听事件。今天让我们来写一个h5的触底翻页加载数据，还是挺简单的。这个是vue2版本，vue3同理。然后我们来写滚动监听的函数。
页面滚动监听 + 小圆点导航联动实现
qq_51412122的博客
11-03 139
通过监听页面的滚动事件，根据当前滚动位置计算对应的小圆点，并给该小圆点添加 active 类来实现小圆点导航的联动效果。同时，在点击小圆点时，通过滚动到对应的位置来实现页面滚动。
移动端h5判断用户手势
Cheris_LT的博客
12-19 999
因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。在h5中，经常会有用户左滑或者右滑手势展示对应效果的需求。看起来似乎很复杂，在vue中举一个例子，直接看懂！
移动端（H5）监听滚动、惯性滚动及pc端滚动（原理通过定时器）
o_o6666的博客
11-12 4031
根据项目需求，实现类似微信下滑加载历史记录，vant组件库是上拉加载，所以自己百度并实现下滑加载，主要监听滚动事件。 因为项目有pc及移动，所以移动和pc要分开监听 pc端： if (document. ) { //firefox document.addEventListener("DOMMouseScroll", this.onRefresh, false); } //滚动滑轮触发scrollFunc方法 //ie 谷歌 window.onmousewheel = document.o
js 滚动监听，核心方法
橙-极纪元-cplvfx-JJY.Cheng
03-08 2730
js 滚动监听，核心方法
帮我写vue加elementui table判断页面触底
03-14
当用户滚动到页面底部时，可以触发一个函数来加载更多数据。以下是一个示例代码： <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [], currentPage: 1, pageSize: 10, total: 100 } }, mounted() { this.loadData() }, methods: { loadData() { // 模拟异步加载数据 setTimeout(() => { const newData = [] for (let i = 0; i < this.pageSize; i++) { const index = (this.currentPage - 1) * this.pageSize + i newData.push({ name: `用户${index}`, age: 20 + i, address: `地址${index}` }) } this.tableData = this.tableData.concat(newData) this.currentPage++ }, 1000) }, handleScroll(event) { const table = event.target const scrollHeight = table.scrollHeight const scrollTop = table.scrollTop const clientHeight = table.clientHeight if (scrollHeight - scrollTop === clientHeight) { this.loadData() } } }, mounted() { this.loadData() } } </script> <style> .el-table__body-wrapper { max-height: 400px; overflow-y: auto; } </style> 在这个示例中，我们使用了 element-ui 的表格组件 el-table，并且将数据绑定到了 tableData 变量上。在 mounted 钩子函数中，我们调用了 loadData 函数来加载第一页数据。loadData 函数模拟了异步加载数据的过程，每次加载 pageSize 条数据，然后将数据追加到 tableData 中，并且将 currentPage 加 1。 在 el-table 上添加了一个滚动事件监听器 handleScroll，当用户滚动到底部时，会触发 handleScroll 函数。在 handleScroll 函数中，我们通过计算表格的滚动高度、滚动位置和可见高度，来判断用户是否已经滚动到了底部。如果滚动到了底部，就调用 loadData 函数来加载更多数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值