[程式碼&DEMO] [HackMD完整筆記]

目標

滾動視窗到定點時，圖片從兩側滑入；圖片位置離開可見區域時，圖片向兩側滑出。

步驟流程

STEP1 獲取頁面中的所有圖片元素

const slideImages = document.querySelectorAll('.slide-in');

STEP2 滾動事件監聽
針對頁面的滾動事件進行監聽，但每次滾動都觸發監聽事件，會降低 JavaScript 運行性能，所以用debounce 函數來降低觸發的次數。

function checkSlide(e) {
        console.log(e);
        console.count(e);
    }

    window.addEventListener('scroll', debounce(checkSlide));

STEP3 尺寸獲取及處理
頁面的滑動會有兩個臨界點，決定了圖片的顯示和隱藏：
(1) 下滑到圖片的一半處
(2) 完全滑過圖片使圖片已不在視窗之內

// 滑動頁面的底部距離扣掉圖片一半的高
const slideInAt = (window.scrollY + window.innerHeight) - img.height / 2;
// 圖片底部距離頂端的距離
const imgBottom = img.offsetTop + img.height;

利用兩個臨界點來判斷圖片是否處在需要顯示的區域內，故利用兩個值來存取此條件的結果（以預防每次事件監聽的結果賦值給常數後，不會隨window的屬性值變化）。

// 已滑過了圖片的一半
const isHalfShow = slideInAt > img.offsetTop;
// 未完全滑過圖片
const isNotScrollPast = window.scrollY < imgBottom;

STEP4 滾動至指定區域的條件判斷
符合條件的就幫此圖片加入.active 類，不符合則去除。

if (isHalfShow && isNotScrollPast) {
    img.classList.add('active');
} else {
    img.classList.remove('active');
}

學習筆記

Window.scrollY

目前瀏覽器視窗已滾動的Y軸（垂直位置）

Window.innerHeight

目前瀏覽器視窗的高度

HTMLElement.offsetTop

返回指定元素相對於有父元素(offsetParent)中的頂端位置，以此案例來說，sliderImage的父元素就是window。

Debounce函數

語法：
_.debounce(func, [wait=0], [options={}])
該函數會從上一次被呼叫後，延遲 wait 毫秒後調用 fn 方法。