通過(guò)監(jiān)聽(tīng)scroll事件判斷滾動(dòng)位置，接近底部時(shí)觸發(fā)加載；2. 使用防抖控制觸發(fā)頻率，避免性能問(wèn)題；3. 設(shè)置isLoading狀態(tài)防止重復(fù)請(qǐng)求；4. 添加加載中和已到底部提示提升用戶體驗(yàn)。

實(shí)現(xiàn)無(wú)限滾動(dòng)加載，核心是監(jiān)聽(tīng)用戶滾動(dòng)行為，在接近頁(yè)面底部時(shí)自動(dòng)加載新內(nèi)容。不需要復(fù)雜的框架，純 HTML、CSS 和 JavaScript 就能完成。關(guān)鍵在于合理使用 scroll 事件監(jiān)聽(tīng) 并控制觸發(fā)頻率，避免性能問(wèn)題。

1. 監(jiān)聽(tīng)滾動(dòng)事件的基本結(jié)構(gòu)

通過(guò) addEventListener 綁定 window 的 scroll 事件，判斷用戶是否滾動(dòng)到接近頁(yè)面底部。

常用判斷條件：
- 當(dāng)前滾動(dòng)位置 + 可視區(qū)高度 ≥ 整個(gè)文檔高度 - 預(yù)設(shè)閾值
- 達(dá)標(biāo)后觸發(fā)加載函數(shù)

示例代碼：

window.addEventListener('scroll', function() {
  const scrollTop = window.pageYOffset;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;
  const threshold = 100; // 距離底部100px時(shí)觸發(fā)
<p>if (scrollTop + windowHeight >= documentHeight - threshold) {
loadMoreData();
}
});</p>

2. 防抖控制請(qǐng)求頻率

scroll 事件觸發(fā)非常頻繁，不加控制會(huì)導(dǎo)致性能浪費(fèi)甚至重復(fù)請(qǐng)求。使用防抖（debounce）機(jī)制，確保一定時(shí)間內(nèi)只執(zhí)行一次加載。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

簡(jiǎn)單防抖實(shí)現(xiàn)：

let scrollTimer = null;
<p>window.addEventListener('scroll', function() {
if (scrollTimer) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(() => {
checkIfNearBottom();
}, 150); // 延遲150ms執(zhí)行
});</p><p>function checkIfNearBottom() {
const threshold = 100;
const nearBottom = window.pageYOffset + window.innerHeight >= document.body.offsetHeight - threshold;</p><p>if (nearBottom && !isLoading) {
loadMoreData();
}
}</p>

3. 添加加載狀態(tài)防止重復(fù)請(qǐng)求

網(wǎng)絡(luò)請(qǐng)求需要時(shí)間，必須設(shè)置標(biāo)記位，避免用戶快速滾動(dòng)時(shí)多次觸發(fā)加載。

怪獸AI數(shù)字人

數(shù)字人短視頻創(chuàng)作，數(shù)字人直播，實(shí)時(shí)驅(qū)動(dòng)數(shù)字人

44

查看詳情

• 定義 isLoading = false
• 開(kāi)始請(qǐng)求前設(shè)為 true
• 數(shù)據(jù)加載完成后設(shè)為 false

示例邏輯：

let isLoading = false;
<p>function loadMoreData() {
if (isLoading) return;
isLoading = true;</p><p>// 模擬異步請(qǐng)求
fetch('/api/more-content')
.then(res => res.json())
.then(data => {
appendContent(data);
isLoading = false;
})
.catch(() => {
isLoading = false;
});
}</p>

4. 提升體驗(yàn)：添加加載提示和結(jié)束提示

用戶需要知道正在加載或已加載完畢?？梢栽陧?yè)面底部插入提示元素。

• 顯示“加載中...”動(dòng)畫(huà)
• 數(shù)據(jù)加載完隱藏提示
• 如果沒(méi)有更多數(shù)據(jù)，顯示“已到底部”

HTML 結(jié)構(gòu)建議：

<div id="loader" style="text-align: center; padding: 20px;">
  <span>加載中...</span>
</div>

基本上就這些，關(guān)鍵是控制好觸發(fā)時(shí)機(jī)和請(qǐng)求節(jié)奏，避免卡頓和重復(fù)加載。

以上就是html函數(shù)如何實(shí)現(xiàn)無(wú)限滾動(dòng)加載 html函數(shù)監(jiān)聽(tīng)滾動(dòng)事件的技巧的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！