首页 > 其他分享 >加载更多 - 监听div的滚动scroll

加载更多 - 监听div的滚动scroll

时间:2023-04-03 16:13:49浏览次数:42  
标签:pageNum dom 监听 var div scroll 加载

前言:某些情况下,在展示列表数据时,为了实现性能优化及用户更好的体验,可以先展示十几条数据,然后边滑动边加载更多,可以减少服务器压力及页面渲染时间。

var pageNum =1;//页数
var domHeight=$(".listBox").height()*4;
var dom = document.getElementById('list');
dom.addEventListener('scroll',function () {//监听滚动
  if(dom.scrollTop >= pageNum*domHeight && pageNum <= bigPageNum){ //list滚动过得距离 大于 20条数据的高度  并且  页数小于最大页数 时
      pageNum++;
      loadMore();//加载更多
  }
});

 

标签:pageNum,dom,监听,var,div,scroll,加载
From: https://www.cnblogs.com/redFeather/p/17283356.html

相关文章

  • Vue3 watch 监听函数
    1、watch函数(既要指明监视的属性,也要指明监视的回调)坑:1)监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)2)监视reactive定义的响应式数据中某个属性时:deep配置有效setup(){letsum=ref(0)letmsg=ref('ABCD')letp......
  • Vue监听器~~~~
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=......
  • vue.js 监听器~~~
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=devic......
  • 分治(Divide and Conquer)算法之归并排序
    顾名思义,分治问题由“分”(divide)和“治”(conquer)两部分组成,通过把原问题分为子问题,再将子问题进行处理合并,从而实现对原问题的求解。我们在排序章节展示的归并排序就是典型的分治问题,其中“分”即为把大数组平均分成两个小数组,通过递归实现,最终我们会得到多个长度为1的子数组;“......
  • nginx 下监听同一端口通过路径转发不同服务
    注意v1d2最优先匹配server{listen80;server_namelocalhost; location/v1d2{proxy_passhttp://127.0.0.1:8088;} location/{ root/data/dist; try_files$uri$uri/@router; indexindex.htm......
  • CodeTON Round 4 (Div. 1 + Div. 2, Rated, Prizes!)- Make It Permutation
    题目链接:Problem-C-Codeforces  #include<bits/stdc++.h>usingnamespacestd;typedeflonglongll;#defineendl"\n"intmain(){ios::sync_with_stdio(false),cin.tie(0),cout.tie(0);intT=1;cin>>T;while(......
  • CodeTON Round 4 (Div. 1 + Div. 2, Rated, Prizes!)
    题目链接C核心思路其实这个操作无非就两种:插入和删除。我们可以把重复的元素都先删除,因为这肯定是每个操作必须要做的。我们可以从最基础的情况出发也就是怎么构造出来\(1\sima[i]\)的序列呢。肯定是吧\(i\simn\)之后的序列都删除吧,然后把前面缺少的再补上去吧。所以我们......
  • VUE分别使用普通方法、计算属性、监听器完成简易计算器
    计算器功能:1.加减乘除模可以随意切换使用表单元素<seclect>2.当输入框中数字改变时实时得出运算结果方法1:v-model绑定input框的值,绑定input键盘按下和鼠标点击时触发自定义方法getResult,该方法用来计算表达式的值。方法2:使用computed计算属性方法3:使用watch侦听属性3.可以使......
  • springboot-监听器
    监听器ApplicationListener可以实现这个接口时传入对应的监听器,用于监听该事件比如:实现ApplicationListener<ContextRefreshedEvent>接口,重写onApplicationEvent方法,将ContextRefreshedEvent对象传进去。如果我们想在加载或刷新应用上下文时,也重新刷新下我们预加载的资源......
  • SP181 SCUBADIV - Scuba diver 题解
    题目传送门题目大意潜水员有\(n\)个气缸,每个气缸能够提供容量为\(o_i\)的氧气和容量为\(d_i\)的氮气,每个气缸的重量为\(w_i\)。给出潜水员所需要的氧气量和氮气量,求所需气缸的总重的最低限度是多少。解题思路对于每个气缸,有两种不同的费用:氧气和氮气,需要满足这两个条......