每日 30 秒 ⏱ 是否頁面底部

摘要： 一天 30 秒 ⏱ 一段程式碼 ✍️ 一個場景 寫前端頁面時最經常遇到的開發需求之一就是 渲染後端資料返回的資料物件，當資料物件數量極多的時候便需要進行分頁。 常見的分頁方式有三種： 在頁面底部生成上一頁 、下一頁 、...

一天 30 秒 ⏱ 一段程式碼 ✍️ 一個場景

寫前端頁面時最經常遇到的開發需求之一就是 渲染後端資料返回的資料物件，當資料物件數量極多的時候便需要進行分頁。

常見的分頁方式有三種：

1. 在頁面底部生成上一頁 、下一頁 、頁面列表 按鈕。

   自動載入更多資料
   

2. 在頁面底部生成載入更多資料 按鈕。

   自動載入更多資料
   

3. 當用戶滾動到頁面底部時自動載入更多資料 。
   • 更符合使用者直覺體驗很好。
   • 需要注意頁面資料過多造成的卡頓。
   • 如果頁尾有其他資料使用者需要翻遍資料才能看到頁尾。

當然分頁沒有絕對的銀彈得根據不同的情況進行略微的調整和交叉搭配使用分頁方式。例如：頁面頁尾有需要使用者檢視的資料時，可以使用自動載入更多資料 ，當載入二到三頁時提示載入更多資料 按鈕，使得特定使用者可以較為方便的看到頁尾內容更多的情景就不一一列舉了。

頁面資料過多造成的卡頓可以參考每日 30 秒之 chunk 中給出的情景案例，利用資料分組顯示 來減少 DOM 節點進而優化頁面卡頓,這裡不討論分頁及其相關的優化。

今天分享的程式碼是分頁過程中會用到的一個函式判斷是否到達了頁面底部 ：

// 該原始碼來自於 https://30secondsofcode.org
const bottomVisible = () =>
document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.scrollHeight || document.documentElement.clientHeight);
複製程式碼

程式碼分析

視窗可見區域的高度 和視窗已經滾動的距離高度 得到當前頁面所處的位置：

document.documentElement.clientHeight + window.scrollY
複製程式碼

再與整個頁面的高度 作比較來判斷是否已經到達了頁面底部，如果整個頁面的高度 不存在則使用視窗可見區域的高度 做代替：

... >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)
複製程式碼

小技巧：利用|| 技巧來初始化資料

使用場景

做一個無限載入資料項的分頁功能，當頁面到達底部時進行資料載入。

// 監聽頁面滾動
document.addEventListener('scroll', () => {
// 如果到達頁面底部
if(bottomVisible()) {
// 1.傳送網路請求獲取資料
// 2.插入資料到頁面
}
});
複製程式碼

相似程式碼

判斷是否到達了頁面頂部

const topVisible = () => window.scrollY == 0
複製程式碼