話不多說，直接上代碼，有些地方需要加自己的邏輯，自己加
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滾動條測試</title>
<style>
.parent_div {
width: auto;
height: auto
}
.lostfound-text{
width: 200px;
height: 50px;
border: 1px red solid;
}
</style>
</head>
<body>
<div class="parent_div">
<div style="width: 100%;height: 500px;border: black 1px solid;"></div>
<ul id="my_list">
<li class="lostfound-text">This is list item origin.</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
var pos = 0;
var LIST_ITEM_SIZE = 2;
//滾動條距底部的距離
var BOTTOM_OFFSET = 0;
createListItems();
$(document).ready(function () {
$(window).scroll(function () {
var $currentWindow = $(window);
//當前窗口的高度
var windowHeight = $currentWindow.height();
//當前滾動條從上往下滾動的距離
var scrollTop = $currentWindow.scrollTop();
//當前文檔的高度
var docHeight = $(document).height();
//當 滾動條距底部的距離 + 滾動條滾動的距離 >= 文檔的高度 - 窗口的高度
//換句話說：（滾動條滾動的距離 + 窗口的高度 = 文檔的高度） 這個是基本的公式
if ((BOTTOM_OFFSET + scrollTop) >= docHeight - windowHeight) {
//這里可以寫判斷邏輯
createListItems();
}
});
});
function createListItems() {
var mylist = $("#my_list");
for (var i = pos; i < pos + LIST_ITEM_SIZE; ++i) {
let x='<li class="lostfound-text">This is list item origin.</li>';
mylist.append(x);
}
pos += LIST_ITEM_SIZE;
}
})
</script>
</body>
</html>