AJAX 加载更多滚动到底部<div>

Question

我想使用AJAX和PHP函数从mysql加载数据。示例：

#ajaxload {
border: 1px solid #000;
max-height: 400px;
overflow-y:scroll;
}

<?php
//data from mysql...
?>
<div id="ajaxload">
<ul>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>Loading next data...</li>
</ul>
</div>

但我没有在这里(在stackoverflow上(找到具体的例子。。。一切都只需要整页滚动，但我只想在<div>中滚动以加载更多数据。你能帮我吗？

Answer 1

从底层DOM元素中获取scrollHeight属性：

$("#ajaxload").scrollTop($("#ajaxload").get(0).scrollHeight);

Answer 2

VanillaJS方法，例如。

<div id="ajaxload">
<ul>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>data...</li>
<li>Loading next data...</li>
</ul>
</div>
const el = document.querySelector('#ajaxload');
el.addEventListener('scroll', function(event) {
const element = event.target;

if (element.scrollHeight - element.scrollTop === element.clientHeight) {
console.log('make now your API call...');
}
});