每日 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

一塊兒成長

在困惑的城市裏總少不了並肩同行的 夥伴 讓咱們一塊兒成長。

• 若是您想讓更多人看到文章能夠點個 點贊。
• 若是您想激勵小二能夠到 Github 給個 小星星。
• 若是您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop