上節(jié)講到如何判斷是否滾動(dòng)到頁(yè)面的底部，然后進(jìn)行一系列的操作，這節(jié)講下如何在一個(gè)div中一直滾動(dòng)加載，先來(lái)看下下面一段代碼：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>div滾動(dòng)到底部加載</title>
</head>
<style>
.scrollDiv{
width: 500px;
height: 400px;
margin: 10px auto;
background-color: #ff0000;
overflow-y: scroll;
padding: 10px;
}
</style>
<body>
<div class="scrollDiv" id="testDiv">
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
</div>
</body>
<script>
var divscroll = document.getElementById('testDiv');
function divScroll() {
var wholeHeight = divscroll.scrollHeight;
var scrollTop = divscroll.scrollTop;
var divHeight = divscroll.clientHeight;
if(scrollTop + divHeight >= wholeHeight){
alert('滾動(dòng)到底部了！');
//這里寫動(dòng)態(tài)加載的邏輯，比如Ajax請(qǐng)求后端返回下一個(gè)頁(yè)面的內(nèi)容
}
if(scrollTop == 0){
alert('滾動(dòng)到頭部了！');
}
}
divscroll.onscroll = divScroll;
</script>
</html>
仔細(xì)看的話，其實(shí)和判斷網(wǎng)頁(yè)是否滾動(dòng)到底部是一個(gè)道理。
Paste_Image.png
