一個騷氣的文章目錄自動生成器瞭解一下

這個插件根據選定的目錄內容中的 h1, h2, h3, h4, h5, h6 標籤來自動生成目錄插入到選定的目錄容器中，而且提供一個漂亮的樣式效果

• 監聽內容區滾動
• 點擊跳轉功能

兼容性：IE10+ (因爲使用了 node.classList)

地址戳這裏 github地址，歡迎star，issue，pr ~

1. 預覽

炫酷模式：

普通模式：

能夠經過 線上DEMO 來預覽一下炫酷模式的效果

2. 實現思路

滾動的監聽經過 getBoundingClientRect 獲取元素大小以及相對視口的位置，判斷咱們的監聽對象 h1~h6 標籤是否在視口中，若是在則添加 linkActiveClass 類。

傳統的錨點定位跳轉會與hash模式的單頁面應用的路由衝突，會導航到錯誤的路由路徑，這裏採用把要跳轉的id放到 dataset 中，跳轉的時候取出來使用 scrollIntoView 來進行平滑滾動到目標位置。

左邊的邊欄線則是使用 svg 的path來畫出來的，根據層級相應作一些調整，輔以css的 transition 的效果就能夠呈現出不錯的移動效果。

3. Api

若是要使用默認的樣式，請手動引入

import 'progress-catalog/src/progress-catalog.css'

使用方法：

// 引入
import Catalog from 'ProgressCatalog'

// 使用 
new Catalog({
    contentEl: 'loading-animation',
    catalogEl: `catalog-content-wrapper`,
    selector: ['h2', 'h3']
})

構造函數接受的參數：

contentEl [String]

須要檢索生成目錄的內容區的id選擇器，不須要加#

catalogEl [String]

將生成的目錄append進的目錄容器的id選擇器，不須要加#

scrollWrapper [可選, String]

監聽scroll事件的內容區容器的id選擇器，不須要加#，若是不填則默認是 contentEl 的父元素

linkClass [可選, String]

全部目錄項都有的類，默認值：cl-link

注意，若是設置了此值，則須要重寫默認樣式

linkActiveClass [可選, String]

激活的目錄項全部的類，默認值：cl-link-active

注意，若是設置了此值，則須要重寫默認樣式

selector [可選, Array]

選擇目錄的標題標籤，默認值：['h1', 'h2', 'h3', 'h4', 'h5', 'h6']

若是隻但願生成目標內容區的 h2, h3 標籤的目錄，那麼能夠設置 selector: ['h2', 'h3']

activeHook [可選, Function]

當激活新的目錄項標籤的時候的回調函數

topMargin [可選, Number]

第一個目錄標籤在被認爲可見以前須要向下移動的距離，默認值：0

bottomMargin [可選, Number]

同上，向下移動的距離，默認值：0

cool [可選, Boolean]

炫酷模式開關，默認值：true

---

網上的帖子大多深淺不一，甚至有些先後矛盾，在下的文章都是學習過程當中的總結，若是發現錯誤，歡迎留言指出~

參考：

1. 阮一峯 - SVG 圖像入門教程
2. Codepen - Progress Nav
3. MDN - scrollIntoView
4. MDN - HTMLElement.dataset

PS：歡迎你們關注個人公衆號【前端下午茶】，一塊兒加油吧~

另外能夠加入「前端下午茶交流羣」微信羣，長按識別下面二維碼便可加我好友，備註加羣，我拉你入羣～