背景

最近在做提分加的預覽頁面時，有一個用於實現錨點定位的側邊欄導航，而在頁面滾動時，側邊導航也需要隨著頁面的滾動而啟用相應的模組，這就需要監聽頁面的滾動事件了。

解決

• 監聽滾動事件

  mounted() {
  //監聽頁面滾動事件
  window.addEventListener('scroll', this.appScroll)
  //注意：如果由於自己的vue中的樣式導致監聽不到，可以嘗試監聽body或者'#app-root'的滾動事件
  }

• 獲取元素到頂部的距離

  //瀏覽器相容
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
   
  

• 根據業務邏輯實現相應的事件

  我在做到這一塊的時候遇到了一個問題，由於有些時候我的最後一個模組內容很少，導致高度不足，以至於滾動到頁面底部時側邊導航依舊時定位到倒數第二個模組上的，於是我加上了這樣一段程式碼，判斷到頁面到底部時的狀態。

  //如果到底了直接給最後一個
  if(document.documentElement.scrollHeight - document.documentElement.clientHeight == document.documentElement.scrollTop){
  this.activeBtn = 3
  }