在網頁互動中，經常可見滾動觸發事件，今天來試試看吧

最近在一個專案中需要監聽網頁 Scroll 事件，用以觸發元素的移動。學習了JS Scroll 事件，今天來把這個事件整理記錄一下。我們先看效果(僅示意，非專案畫面)。

在此範例中，畫面上有兩個 section，分別爲粉色及藍色的。當畫面向下滾動到剩下一半的地球時，觸發向下移動；同理，當畫面向滾上動到剩下一半的地球時，觸發向上移動。在此需要監聽頁面滾動、獲取滾動資訊、計算觸發對應點、CSS 動畫設定，以及考慮網頁效能需要使用 debounce 函數。

在撰寫 JS 之前，可以先寫好 CSS 動畫，在相對應的圖片加上 transition: transform 2s; ，接著寫一個 class 是移動向下，如下：

.move{
 transform: translate(-270px,110vh);
}

transition 設定當 transform 有所變動時，就會觸發動畫效果，所以我們只需要添加一個向下移動的 transform 設定。在 class 添加 .move 就會向下，當我們希望它向上，就移除該 class。變動 transform 的值，就可以完成我們想要的效果。

接下來看 JS 程式碼，再逐一解釋。

const earthImg = document.querySelector(".moveicon")
function earthmove() {
  const moveToNextAt = (earthImg.offsetTop) + (earthImg.clientHeight / 2);
  if (window.scrollY > moveToNextAt) {
    earthImg.classList.add('move');
  } else {
    earthImg.classList.remove('move');
  }
}
window.addEventListener('scroll', debounce(earthmove, 5));

首先獲取我們的主角地球圖片放在變數earthImg裡面。接著新增一個方法 earthmove。

const moveToNextAt = (earthImg.offsetTop) + (earthImg.clientHeight / 2);

計算當畫面滾動向下時，要在什麼時候觸動動畫，計算完的結果存放在變數 moveToNextAt 裡面。計算方式爲圖片頂端到 body 最上方的距離(earthImg.offsetTop) ，加上圖片高度的一半(earthImg.clientHeight / 2)。

接下來是判斷觸發動畫。

if (window.scrollY > moveToNextAt) {
    earthImg.classList.add('move');
  } else {
    earthImg.classList.remove('move');
  }

如果目前已經滾動的垂直距離(window.scrollY )大於剛剛計算的觸發點(moveToNextAt)，則添加 class move，觸發向下的動畫。反之當目前已經滾動的垂直距離 (window.scrollY )小於剛剛計算的觸發點(moveToNextAt)，就移除向下的動畫，則圖片會往上移動。

window.addEventListener('scroll', debounce(earthmove, 5));

最後添加監聽事件，啓動它。這邊有個要注意的事情是我們在觸發的function 中，多套用了一層 debounce 方法，是因爲滾動頁面是一個連續觸發事件，但我們並不希望方法被不斷觸發，會產生效能問題，因此使用 debounce 做法，使事件在一定時間內只能夠被觸發一次。debounce 的寫法有很多種，選用一個喜歡的就可以囉，我用的是js30 中作者使用的方式，有興趣可以去看看第十三天。若不考慮效能問題，直接觸發動畫，也是可以達成效果的。

以上就是今天的小實作囉，試試看吧