AJAX загрузить больше при прокрутке вниз в <div>

Question

Я хочу загрузить данные из mysql с помощью функций AJAX и PHP. Пример:

#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) конкретный пример c ... Все просто с полной прокруткой страницы, но я хочу только прокрутите <div> для загрузки дополнительных данных. Вы можете мне помочь?

Answer 1

Vanilla JS подход, пример .

<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...');
    }
});

Answer 2

Получить свойство scrollHeight из базового элемента DOM:

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