AJAX load more on scroll to bottom in <div>

Question

I wanna load data from mysql using AJAX and PHP function. Example:

 #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>

But I didn't find here (on stackoverflow) the specific example...Everything is just with full page scrolling, but I want only scrolling in <div> for loading more data. Can you help me?

Answer 1

Get the scrollHeight property from the underlying DOM element:

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

Answer 2

Vanilla JS approach, example .

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