滚动条分页滚动条事件触发

    xiaoxiao2022-06-23  18

    使用jquery框架实现滚动条分页/滚动条事件触发,简单明了

    //滚动条事件 record-dataTable-tbody是被滚动的标签的ID,可以是div,table,table里面的tbody等 $("#record-dataTable-tbody").scroll(function(){ //滚动条位置 var scrollTop = $("#record-dataTable-tbody").scrollTop(); //可视窗口的高度 var viewportHeight = $("#record-dataTable-tbody").height(); //整个页面可以滚动的高度 var scrollHeight = $("#record-dataTable-tbody")[0].scrollHeight; //“如果滚动条的位置”+“可视窗口的高度”=“整个页面可以滚动的高度”,那么就调用相应的函数加载数据 if(scrollTop+viewportHeight==scrollHeight){ //模仿数据加载函数 动态给table里面的tbody添加行 var htmll=""; for(var i=0;i<5;i++){ htmll+="<tr ><td >"+(i+1)+"</td>" +"<td >11</td>" +"<td >22</td>" +"<td >33</td>" +"<td >44</td>" +"<td >55</td>" +"<td >66</td>" +"<td >77</td>" +"<td >88</td>" +"<td >99</td>" +"<td >22</td>" +"<td >33</td>" +"<td >44</td>" +"<td >55</td></tr>" } $("#record-dataTable-tbody").append(htmll); } });有一个地方: var scrollHeight = $("#record-dataTable-tbody")[0].scrollHeight;这么取的原因是jQuery封装的对象是数组,再就是jQuery没有 scrollHeight() 方法

    转载请注明原文地址: https://ju.6miu.com/read-1123233.html

    最新回复(0)