基于javascript实现浏览器滚动条快到底部时自动加载数据

前端技术 2023/09/05 JavaScript

废话不多说了，直接给大家贴js代码了。

 <!DOCTYPE html>
 <html>
 <head>
   <script src=\"jquery-...js\" type=\"text/javascript\"></script>
   <script type=\"text/javascript\">
     $(document).ready(function () {
       var range = ;       //距下边界长度/单位px
       var elemt = ;       //插入元素高度/单位px
       var maxnum = ;      //设置加载最多次数
       var num = ;
       var totalheight = ;
       var main = $(\"#content\");           //主体元素
       $(window).scroll(function () {
         var srollPos = $(window).scrollTop();  //滚动条距顶部距离(页面超出窗口的高度)
         //console.log(\"滚动条到顶部的垂直高度: \"+$(document).scrollTop());
         //console.log(\"页面的文档高度 ：\"+$(document).height());
         //console.log(\'浏览器的高度：\'+$(window).height());
         totalheight = parseFloat($(window).height()) + parseFloat(srollPos);//滚动条当前位置距顶部距离+浏览器的高度
         if (($(document).height() - totalheight) <= range && num != maxnum) {//页面底部与滚动条底部的距离<range
           main.append(\"<div style=\'border:px solid tomato;margin-top:px;color:#ac\" + (num % ) + (num % ) + \";height:\" + elemt + \"\' >hello world\" + srollPos + \"---\" + num + \"</div>\");
           main.append(\"<div style=\'border:px solid tomato;margin-top:px;color:#ac\" + (num % ) + (num % ) + \";height:\" + elemt + \"\' >hello world\" + srollPos + \"---\" + num + \"</div>\");
           num++;
         }
       });
     });
   </script>
 </head>
 <body>
   <div id=\"content\" style=\"height:px\">
     <div id=\"follow\">this is a scroll test;<br />  页面下拉自动加载内容</div>
     <div style=\'border:px solid tomato;margin-top:px;color:#ac;height:\'>hello world test DIV</div>
   </div>
 </body>
 </html>

ps：原生JavaScript如何触发滚动条事件?

<script>
window.onscroll = function(){
var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
var scrollH = document.documentElement.scrollHeight||document.body.scrollHeight;
var clientH = document.documentElement.clientHeight||document.body.clientHeight
//console.log(scrollT +\"+\"+scrollH+\"+\"+clientH);
if(scrollT == scrollH - clientH){
console.log(\"到底部了\");
}else if(scrollT == 0){
console.log(\"到顶部了\");
}
}
</script>

本文地址：https://www.stayed.cn/item/12077

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案