下拉加載更多DEMO(js實現)

時間 2019-12-10

標籤下拉加載更多 demo 實現欄目 JavaScript 简体版

原文原文鏈接

項目的一個前端頁面展現已購買商品時，要求能下拉加載更多。花了點時間研究這個功能，之前沒作過。javascript

首先須要給div加scroll事件，監聽滾動條滾動動做。那什麼時候觸發加載動做呢？當滾動條滾到底的時候。如何判斷滾動條滾到底呢？html

當滾動條的高度加上滾動條到div頂部的高度等於div的可滾動高度時，說明滾動條到底部了。公式以下。前端

[javascript] view plain copy

給出一個能跑的demo，須要引入jquery。java

[javascript] view plain copy

<!DOCTYPE=html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div>下拉加載更多</div>
<div class="main" style="height:700px;overflow:auto;">
<div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:800px' ></div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".main").unbind("scroll").bind("scroll", function(e){
var sum = this.scrollHeight;
if (sum <= $(this).scrollTop() + $(this).height()) {
$(".main").append($(".child").clone());
}
});
});
</script>
</html>