Day28：每天一个小练习 - JS30-13-Slide in on Scroll

参考资料：
Alex老师教学
PJCHENder笔记

卷动出现图片。

题目预设的过滤效果，避免多次触发使效能下降

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

写出监听

// 控制卷轴
let scrollHandler = () => {
    console.log('scroll', new Date().getTime()); //可看出滑动时的时间差距很小

};
// 卷轴在浏览器上，使用window
window.addEventListener('scroll', scrollHandler);

先写出上下高度，开始写图片进入画面

// 控制卷轴
let scrollHandler = () => {
    let windowTop = window.scrollY; //相对於最上方的网页座标，单位px
    let windowBottom = windowTop + window.innerHeight; //网页最底部高度 = 上方高度 + 页面高度
    
};

图片中段进入页面时滑入

let images = document.querySelectorAll('img'); //所有图片

// 控制卷轴
let scrollHandler = () => {
    let windowTop = window.scrollY; //相对於最上方的网页座标，单位px
    let windowBottom = windowTop + window.innerHeight; //网页最底部高度 = 上方高度 + 页面高度
    iimages.forEach(img => {
        //图片一半进入画面才出现
        if (img.offsetTop + img.height / 2 < windowBottom) {
            img.classList.add('active');
        }
    });
};

优化并加入移除功能，效果就会是图片依照画面卷动进入和消失

	images.forEach(img => {
        let imgMiddle = img.offsetTop + img.height / 2; //图片与上方距离+图片高度/2
        //图片进入画面最下方和最上方之间时加入active使之出现，反之移除使图片消失
        if (imgMiddle < windowBottom && imgMiddle > windowTop) {
            img.classList.add('active');
        } else {
            img.classList.remove('active');
        }
    });

在监听加入预设的方讯就完成了

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

连结