Implémentation du chargement automatique des données lorsque la barre de défilement du navigateur atteint le bas en fonction des compétences javascript

Implémentation du chargement automatique des données lorsque la barre de défilement du navigateur atteint le bas en fonction des compétences javascript_javascript

WBOY

Libérer： 2016-05-16 15:28:42

original

1067 Les gens l'ont consulté

Plus de bêtises, je vais juste poster le code js pour vous.

 <!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>

Copier après la connexion

ps : Comment le JavaScript natif déclenche-t-il les événements de la barre de défilement ?

<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>

Copier après la connexion