JavaScript 生成頁面文章 滾動目錄(編目)

一篇文章顯示在瀏覽器中，如果文章足夠長，那么滾動條亦會非常長，因此，我們最好給文章加上 文章目錄，同時告知用戶，當前所瀏覽的文章位置。

緣由

由於項目中需要實現這一功能，所以我便到搜索引擎中尋找對應的插件，必應，百度，搜狗（Google因軟件問題無法訪問），可惜的是，插件配置復雜。
所以，我經過簡單畫圖，大致明白了實現一個動態的文章目錄需要的變量以及步驟，注意：不是基於 a 標簽的錨點

簡單了解，什么是 文章目錄（編目）？

每一篇文章都會有 標題，子標題，這些標題組成起來便是文章的目錄，即編目。
讓我們先來簡單看看基本的文章目錄由什么組成吧：

圖中的是 百度百科 的文章編目，當你瀏覽到了哪里，那么對應的文字編目便提示你瀏覽到了哪里。

實現這樣功能的簡單原理圖

當元素的相對高度進入瀏覽區域后，則說明此元素正在被用戶所閱讀。
當然，這個瀏覽觸發區域可以自行設置 😃

重要的變量

• 元素的相對高度（可能為負值）
• 瀏覽觸發區域
• 元素底部相對高度

瀏覽器高度是不必我們理會的 😃 所以我們先來設置一個程序執行步驟：
觸發條件：用戶滾動頁面
步驟：

• 檢查是否初始化 -> 否
  • 尋找所有的被標記的元素
  • 將被標記元素的信息載入至‘瀏覽概要’中
• 遍歷所有頁面標題，包括副標題
  • 判斷元素的相對高度是否小於 0 (即負值) -> 已經瀏覽過了
    • 判斷元素底部相對高度（即相對高度+元素本身高度）是否大於瀏覽區域的最小值
      • 是（處於瀏覽區域）將所有瀏覽概要標題重置標記，后尋找對應的瀏覽概要標題，並進行瀏覽標記后 break（不必繼續執行）;
  • 判斷元素的相對高度是否處於瀏覽區域
    • 是（處於瀏覽區域）將所有瀏覽概要標題重置標記，后尋找對應的瀏覽概要標題，並進行瀏覽標記后 break（不必繼續執行）;
  • 否 繼續遍歷

結語

我並不清楚這個執行步驟寫得是否詳細，所以有問題可以留言，我會進行答復。
這樣一來，我們就可以做出一模一樣的 文章目錄 當前瀏覽位置了。
值得注意的是，觸發條件一定需要延遲執行，可以是 100ms - 300ms 之中，不過仍然可以視情況指定延遲時間。

部分代碼片段示例：

// 是否已經初始化 -> 忽略初始化的步驟
if ( this._init ) {
  for (let i = 0; i < allBrowse.length; i++) {
    // 是否當前瀏覽元素的相對位置大於 0 
    if ( MTools.getElementViewTop(allBrowse[i]) > 0 ) {
      // 當前瀏覽元素的相對位置是否處於 瀏覽區域 中
      if (210 > MTools.getElementViewTop(allBrowse[i]) && MTools.getElementViewTop(allBrowse[i]) > 120) {
        // 清除瀏覽標記
        clearBrowserMark();
        // 尋找對應的‘瀏覽概要’中的位置並標記
        browserMark(allBrowse[i]);
        break;
      }
    }
    // 獲取其底部在視窗的位置 是否處於瀏覽點之下
    if ((MTools.getElementViewTop(allBrowse[i]) + allBrowse[i].offsetHeight) > 120) {
      // 清除瀏覽標記
      clearBrowserMark();
      // 尋找對應的‘瀏覽概要’中的位置並標記
      browserMark(allBrowse[i]);
      break;
    }
  }
}

我覺得已經夠詳細了。。關於 MTools 是一個前端開源工具包，內涵大量兼容或常用工具，雖然部分來自網絡；
其實來自網絡的代碼片段是我不喜歡重復造輪 😃
這些片段有些包含 bug，但是已經被我修復，可以放心使用

其中手寫了事件處理、動畫部分和修改部分網絡上的代碼片段
也有我自己所寫的小工具 😃

更多詳解可進入此鏈接中查看 https://www.cnblogs.com/chongsaid/p/javascript-developer-tools.html

后續此部件將可能開源至此工具包。

本文來自 https://www.cnblogs.com/chongsaid/
轉載請注明本文地址，否則視為侵犯著作權。

2020-03-13 寫於揭陽