「JavaScript 30」學習筆記（十三）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

做出頁面往下滾時，圖片滑入、滑出文章的效果。

筆記

使用作者從網路上抓下來的 debounce() 方法，這是讓指定方法在一定時間（毫秒）內只能觸發一次。

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);
    };
};

---

首先選取所有圖片元素。

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

---

設定一個 checkSlide(e) 方法，使得頁面滾到指定高度時，讓圖片滑入、滑出文章。

function checkSlide() {
    sliderImages.forEach(sliderImage => {
        // 此為圖片滑入文章的高度，即頁面已滾動距離加上螢幕高度減掉圖片一半的高度
        const slideInAt = (window.scrollY + window.innerHeight - sliderImage.height / 2);

        // 此為圖片底部至螢幕頂端的距離，即圖片至螢幕頂端的距離加上圖片的高度
        const imageBottom = sliderImage.offsetTop + sliderImage.height;

        // 判斷是否已達圖片應滑入高度，即圖片滑入文章的高度大於圖片至螢幕頂端的距離
        const isHalfShown = slideInAt > sliderImage.offsetTop;

        // 判斷是否未達圖片應滑出高度，即頁面已滾動距離小於圖片底部至螢幕頂端的距離
        const isNotScrollPast = window.scrollY < imageBottom;

        // 如果已達圖片應滑入高度，且未達圖片應滑出高度，就加上 `active` 樣式
        if (isHalfShown && isNotScrollPast) {
            sliderImage.classList.add('active');
        } else {
            sliderImage.classList.remove('active');
        }
    });
}

• offsetTop 屬性代表元素與螢幕頂端的距離。

---

監聽 window 物件，使其在 scroll 事件發生時，觸發 checkSlide() 方法。

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