Scrollspy 滾動監控，讓網頁根據捲軸位置自動更新選單

這次網站改版，我想在文章右邊加入目錄，並且讓目錄可以根據卷軸位置自動更新顯示，這種功能稱為滾動監聽 (Scrollspy)。 Scrollspy 技術很早以前就有了，算不上什麼新技術，所以我本來打算直接使用 Bootstrap 內建的 Scrollspy 製作。在製作過程中，我一直遇到觸發更新事件的捲軸位置不正確的問題。似乎 HTML 結構一定要符合 Bootstrap 要求的結構才能正常運作，但網站上已經有很多文章，每篇都進行調整的工作量太大了。

因此，我花時間研究了一下 Scrollspy 原理，並決定自己開發此功能，本文將分享我的製作思路，提供給大家參考。目前文章右邊的目錄就是使用本文分享的方式製作，但您也能點擊下方連結觀看成果：

Scrollspy 滾動監控

思路一：使用 onscroll 事件

第一時間想到最簡單的方式就是使用 onscroll 事件，在事件中判斷卷軸到達哪些區塊，並更新相對應的目錄。這種做法只要判斷寫得好，可以很精確的控制更新選單的時機。缺點則是比較耗效能，因為 onscroll 是連續觸發的事件，每次捲動卷軸就會一直連續觸發事件。因此，我並沒有使用這個方法方式。

思路二：使用 Intersection Observer API

Intersection Observer 採用非同步執行，不會隨著卷軸捲動一直觸發事件。雖然官方文件說 Intersection Observer 沒辦法精確到像素，只能偵測大概範圍，但拿來做 Scrollspy 已經十分夠用了。

此外，我看很多文章都說 Intersection Observer 底層使用 window.requestIdleCallback() 來觸發 callback()，這表示只有當瀏覽器空閒下來才會執行 callback() 中的程式碼，優先層級較低，較不吃效能。不過我並沒有找到這段話的相關證據，查看 IntersectionObserver polyfill 好像也沒有相關的程式碼，如果有人知道這段話證據在哪裡的話，歡迎留言告訴我。

基本用法

                
                    let options = {
                        root: document.querySelector('#scroll'),
                        rootMargin: '0px 0px 0px 0px',
                        threshold: 1.0,
                    };
                    let callback = (entries, observer) => {
                        for (const entry of entries) {
                            if (entry.isIntersecting) {

                            }
                        }
                    };
                    let observer = new IntersectionObserver(callback, options);
                    observer.observe(section);

行 1 ~ 13：
建立 IntersectionObserver 物件時，需要兩個參數 options 和 callback。 options 包含三個參數：root、rootMargin 和 threshold，這些在下一個小節會進一步詳細說明。 callback 是當觀察區塊進入或離開目標範圍時要執行的程式碼，您可以使用 entry.isIntersecting 來判斷被觀察區塊是進入目標還是離開目標。
行 14：
當 IntersectionObserver 建立後，將 section 加入觀察對象，也就是說當 section 進入或離開目標範圍時，就會觸發 callback()。

重要參數

root: 指定 viewport，也就是當觀察區塊進入該區域觸發 callback()。預設值為 null，表示 viewport 為最外層的瀏覽器。
rootMargin: viewport 的偵測範圍預設與 viewport 的長寬一致，當 rootMargin 數值為正數的話，表示擴大偵測範圍，如果為負數的話，則是縮小偵測範圍。此外，rootMargin 與 CSS 的 margin 類似，有四個數字表示上右下左的 margin 數值，也能使用百分比。
threshold: 參數值為 0 ~ 1，表示被觀察區塊有多少百分比進入偵測範圍內才觸發 callback()，預設值為 0，表示只要被觀察區塊有 1 個像素進入偵測區域就觸發。這個參數也能使用陣列，例如 [0.25, 0.5, 0.75, 1] 表示當被觀察區塊 25%、50%、75%、100% 進入都觸發 callback()。

實作

了解原理之後，現在可以開始動手實作了。首先，我們需要先製作一個導覽列及內容區塊。在下面的範例中，我們假設有四個內容區塊，所以導覽列中也要有四個連結，HTML 大致如下。

            
                <ul class="nav nav-pills nav-fill">
                    <li class="nav-item"><a href="#section1" class="nav-link">區塊一</a></li>
                    <li class="nav-item"><a href="#section2" class="nav-link">區塊二</a></li>
                    <li class="nav-item"><a href="#section3" class="nav-link">區塊三</a></li>
                    <li class="nav-item"><a href="#section4" class="nav-link">區塊四</a></li>
                </ul>
                <div class="scrollspy">
                    <div id="section1" class="section">區塊一</div>
                    <div id="section2" class="section">區塊二</div>
                    <div id="section3" class="section">區塊三</div>
                    <div id="section4" class="section">區塊四</div>
                </div>

接著，使用 CSS 稍微美化一下，這邊只是稍微美化一下而已，並且將每個區塊高度設定為 100%，以方便展示。當然，您可以根據自己的設計需求進行更進一步的調整。

            
                .nav {
                    background: #CCCCCC;
                }
                .nav .nav-item .nav-link {
                    border-radius: 0px;
                }
                .nav .nav-item .nav-link.active {
                    background: #0D6EFD;
                }
                .scrollspy {
                    height: calc(100vh - 520px);
                    border: 1px solid #CCCCCC;
                    overflow: auto;
                    scroll-behavior: smooth;
                }
                .scrollspy .section {
                    padding: 15px;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    font-size: 2rem;
                }
                .scrollspy .section:nth-child(odd) {
                    background-color: pink;
                }
                .scrollspy .section:nth-child(even) {
                    background-color: yellow;
                }

最後是 JavaScript 的部分。

            
                window.addEventListener('load', (event) => {
                    const content = document.querySelector('.scrollspy');
                    const directory = document.querySelectorAll('.nav li a');
                    const navLinks = [];
                    const options = {
                        root: content,
                        rootMargin: '-5% 0px -95% 0px',
                        threshold: 0
                    };
                    const callback = (entries) => {
                        for (const entry of entries) {
                            const id = entry.target.id
                            if (entry.isIntersecting) {
                                navLinks[id].classList.add('active');
                            } else {
                                navLinks[id].classList.remove('active');
                            }
                        }
                    };
                    const observer = new IntersectionObserver(callback, options);
                    directory.forEach((elem) => {
                        const id = elem.getAttribute('href').substr(1);
                        const section = content.querySelector('#' + id);
                        observer.observe(section);
                        navLinks[id] = elem;
                    })
                })

行 2：
取得 scrollspy 區塊，這個區塊是所有被觀察區塊的外層，具有捲軸，會在行 6 的 root 參數設定為 viewport。
行 3：
取得導覽列中的連結，後續會根據連結的 href 值取得相對應的被觀察者。
行 5 ~ 9：
建立 options，將 content 設定為 viewport，rootMargin 設定為 -5% 0px -95% 0px，讓每個區塊到達上方約 5% 的位置才觸發 callback()。
行 10 ~ 19：
建立 callback，當觀察區塊進入 viewport 時，將相對應的導覽列連結加入 active Class。反之，則移除 active Class。
行 20：
建立 IntersectionObserver 物件。
行 20 ~ 26：
根據 directory 中連結的 href 值取得相對應的 section 元素，並將 section 加入觀察對象。同時將連結物件，使用 id 作為索引值加入 navLinks 中，這是為了方便在 callback() 操作。