實(shí)現(xiàn)思路：
只要滾動(dòng)條拉到的某個(gè)位置距離底部距離大于邊框的高度立即加載新數(shù)據(jù)。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滾動(dòng)加載更多</title>
<style type="text/css">
body,div {margin:0;padding:0;}
body {width: 100%;background-color: #ccc;display: flex;flex-wrap: wrap;justify-content: space-around;border: 1px solid gold;}
.load_div {width: 400px;height: 300px;border:1px solid red;}
.load_div2 {width: 400px;height: 300px;border:1px solid green;}
</style>
</head>
<body>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var totalHeight = $(document).height();//整個(gè)文檔高度
var seeHeight = $(window).height();//瀏覽器可視窗口高度
var thisBodyHeight = $(document.body).height();//瀏覽器當(dāng)前窗口文檔body的高度
var totalBodyHeight = $(document.body).outerHeight(true);//瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin
var thisWidth = $(window).width(); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?br>
var thisDocumentWidth = $(document).width();//瀏覽器當(dāng)前窗口文檔對(duì)象寬度
var thisBodyWidth = $(document.body).width();//瀏覽器當(dāng)前窗口文檔body的寬度
var totalBodyWidth = $(document.body).outerWidth(true);//瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin
var scrollTop = $(window).scrollTop();//瀏覽器可視窗口頂端距離網(wǎng)頁(yè)頂端的高度（垂直偏移）
//console.log(totalHeight,seeHeight,thisBodyHeight,totalBodyHeight,thisWidth,thisDocumentWidth,thisBodyWidth,totalBodyWidth,scrollTop);
//添加滾動(dòng)事件
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
totalHeight = $(document).height();
// console.log(scrollTop,seeHeight,totalHeight)
if(scrollTop+seeHeight+50>totalHeight){
var htmlText = '<div class="load_div2"></div><div class="load_div2"></div><div class="load_div2"></div>';
$('body').append(htmlText);
}
})
</script>
</html>
您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。
蘇公網(wǎng)安備 32070502010230號(hào)