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

我想使用 AJAX 和 PHP ZC1C425268E68385D14AB5074C17A 從 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

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