AJAX 在滚动到底部时加载更多<div></div><div id="text_translate"><p>我想使用 AJAX 和 PHP ZC1C425268E68385D14AB5074C17A 从 mysql 加载数据。 例子： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> #ajaxload { border: 1px solid #000; max-height: 400px; overflow-y:scroll; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;?php //data from mysql... ?&gt; &lt;div id="ajaxload"&gt; &lt;ul&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;data...&lt;/li&gt; &lt;li&gt;Loading next data...&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</pre></div></div><p></p><p> 但是我在这里（在stackoverflow上）没有找到具体的例子......一切都只是全页滚动，但我只想滚动&lt;div&gt;以加载更多数据。 你能帮助我吗？</p></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...');
    }
});