JS30-13-Slide-in-on-Scroll

發表於 | 分類於 ， | 0 comments

滾動捲軸，使圖片滑動顯示。

目標

  • 當滾動捲軸到「特定定點」時，使圖片滑動顯示。

實踐步驟

  1. CSS的動畫效果

    • transition
    • transform、translateX、scale

  2. 監聽scroll滾動事件，並取得相關高度的資訊，進行判斷

    • window.scrollY
    • window.innerHeight
    • HTMLElement.height
    • HTMLElement.offsetTop

成品

[DEMO] | [GitHub]

JS學習紀錄

減緩呼叫function的時間

因為監聽scroll的事件，當畫面滾動時，會在短時間觸發好幾次Event，
所以為了降低對效能上的影響，作者寫了一個debounce的函式，
用來降低觸發的間隔時間。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 減緩呼叫function的時間
function debounce(func, wait = 20, immediate = true) {
  var timeout;
  return function() {
  var context = this, args = arguments;
  var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
  };
  var callNow = immediate && !timeout;
  clearTimeout(timeout);
  timeout = setTimeout(later, wait);
  if (callNow) func.apply(context, args);
  };
}

// 呼叫 funtion
window.addEventListener('scroll', debounce(handleShowImage));

各種高度的取得及運用

程式的邏輯：

  1. 當 window.scrollY 移動到 圖片一半以上 的位置時，將圖片顯示
  2. 當 圖片底部 已超過 window.scrollY 的位置時，將圖片隱藏
高度的運用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function handleShowImage(e){
  slideImages.forEach( sliderImage => {
    // 取得 圖片1/2的座標點（卷軸垂直位移量＋視窗高度）- 1/2圖片高度
    const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
    // 取得 圖片底部座標點（圖片頂部座標點 + 圖片高度）
    const imageBottom = sliderImage.offsetTop + sliderImage.height;

    // 判斷 視窗 是否已經超過 圖片高度一半
    const ishalf = slideInAt > sliderImage.offsetTop;
    // 判斷 滾動範圍 是否已經超過 圖片底部
    const isNotOver = imageBottom > window.scrollY;

    // 超過圖片高度一半 且 未超過圖片底部，則顯示
    if ( ishalf && isNotOver){
      sliderImage.classList.add('active');
    }else{
      sliderImage.classList.remove('active');
    }
  })
}

可額外參考的方法：