Javascript - 当 div 进入 View 时将图像添加到该 div 中

Question

我在一个页面上有多个 div 元素，其中一些在页面加载时位于视口(viewport)中(通常只有一个)，其他元素(最多 2 或 3 个)位于首屏下方。

当用户可见时，我需要将图像添加到 div 中。我只希望每个 div 发生一次。因此，如果用户再次向上/向下滚动，则不会被计数。

我已经检查过并找到了类似的解决方案，但我不确定如何在 div 进入视口(viewport)后触发它。我尝试在滚动时向窗口添加事件监听器，但没有取得太大成功，并且在页面滚动之前，它不会计算页面加载时折叠上方的初始 div。如果用户不滚动并离开页面，那么我就错过了事件。

我发现的其他解决方案都使用 ID 而不是类。

到目前为止，根据链接中的答案，我的代码如下

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (el, fullyInView) {
        var rect = el.getBoundingClientRect();
        var elemTop = rect.top;
        var elemBottom = rect.bottom;

        // Only completely visible elements return true:
        var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
        // Partially visible elements return true:
        // isVisible = elemTop < window.innerHeight && elemBottom >= 0;
        return isVisible;
    }
};

var Utils = new Utils();

var matches = document.querySelectorAll("div.twinpine-container");

window.addEventListener("scroll", function () {
    for (var i = 0; i < matches.length; i++) {
        var isElementInView = Utils.isElementInView(matches[i], false);

        if (isElementInView) {
            console.log(i + ' in view');
        } 
        else {
            console.log(i + ' out of view');
        }
    }
});

如果可能的话，我希望解决方案是 vanilla js。

Answer 1

快到了。两个问题:您需要知道 isVisible 何时发生变化，而不仅仅是它是什么 - 因此您必须存储之前的结果并进行比较。存储它的一种简单方法是在元素上使用类。

function checkVisibility ( element ) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    var prev = el.classList.contains('visible');
    var entered = isVisible === true && prev === false;
    var exited = isVisible === false && prev === true;
    el.classList.toggle( 'visible', isVisible );
    return { visible: isVisible, entered: entered, exited: exited };
}

其次，您想要检查这些 div 在加载和滚动时的可见性。只需命名您的滚动函数并调用它，并将其附加到滚动事件即可。

function onScroll () {
    for (var i = 0; i < matches.length; i++) {
        var visibility = checkVisibility( matches[i] );
        if ( visibility.entered ) {
            console.log( 'hi' );
        }
        else if ( visibility.exited ) {
            console.log( 'bye' );
        }
    }
}

window.addEventListener('scroll', onScroll);
onScroll();