下拉加載更多這種原理很容易想明白，但是不自己寫一個簡單的，老是不踏實，獲取什么高度再哪里獲取之類的。於是自己簡單寫了個，就是頁面上有幾個div，然后當滾動條拉到某個位置的時候，再繼續加載div。順便又查了下各種高度寬度，給body加邊框去邊框看了下具體差異，不過一個邊框的差異，只要滾動條拉到的某個位置距離底部距離大於邊框的高度都不會影響加載更多的效果。代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>滾動加載更多</title> 6 <style type="text/css"> 7 body,div{ 8 margin:0; 9 padding:0; 10 } 11 body{ 12 width: 100%; 13 background-color: #ccc; 14 display: flex; 15 flex-wrap: wrap; 16 justify-content: space-around; 17 border: 1px solid gold; 18 } 19 .load_div{ 20 width: 400px; 21 height: 300px; 22 border:1px solid red; 23 } 24 .load_div2{ 25 width: 400px; 26 height: 300px; 27 border:1px solid green; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="load_div"></div> 33 <div class="load_div"></div> 34 <div class="load_div"></div> 35 <div class="load_div"></div> 36 <div class="load_div"></div> 37 <div class="load_div"></div> 38 <div class="load_div"></div> 39 <div class="load_div"></div> 40 <div class="load_div"></div> 41 </body> 42 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 43 <script type="text/javascript"> 44 var totalHeight = $(document).height();//整個文檔高度 45 var seeHeight = $(window).height();//瀏覽器可視窗口高度 46 var thisBodyHeight = $(document.body).height();//瀏覽器當前窗口文檔body的高度 47 var totalBodyHeight = $(document.body).outerHeight(true);//瀏覽器當前窗口文檔body的總高度 包括border padding margin 48 var thisWidth = $(window).width(); //瀏覽器當前窗口可視區域寬度 49 var thisDocumentWidth = $(document).width();//瀏覽器當前窗口文檔對象寬度 50 var thisBodyWidth = $(document.body).width();//瀏覽器當前窗口文檔body的寬度 51 var totalBodyWidth = $(document.body).outerWidth(true);//瀏覽器當前窗口文檔body的總寬度 包括border padding margin 52 var scrollTop = $(window).scrollTop();//瀏覽器可視窗口頂端距離網頁頂端的高度（垂直偏移） 53 // console.log(totalHeight,seeHeight,thisBodyHeight,totalBodyHeight,thisWidth,thisDocumentWidth,thisBodyWidth,totalBodyWidth,scrollTop); 54 //添加滾動事件 55 $(window).scroll(function(){ 56 scrollTop = $(window).scrollTop(); 57 totalHeight = $(document).height(); 58 // console.log(scrollTop,seeHeight,totalHeight) 59 if(scrollTop+seeHeight+50>totalHeight){ 60 var htmlText = '<div class="load_div2"></div><div class="load_div2"></div><div class="load_div2"></div>'; 61 $('body').append(htmlText); 62 } 64 }) 65 </script> 66 </html>
這個是寫的距離底部50px的時候加載div