Question

我在页面上有多个div元素，有些在页面加载的视口中（通常只有一个），而其他（最多2个或3个）在页面下方。

我需要在用户可见时向div添加图像。我只希望每个div发生一次。因此，如果用户再次向上/向下滚动，则不计算在内。

我已经检查了SO并且已经找到了这样的解决方案，但是我不知道如果div进入视口，如何解决这个问题。我已经尝试在滚动时向窗口添加一个事件监听器但是没有取得多大成功，并且它不会计算页面加载之前的首页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();

Answer 2

AOS是一个非常轻量级的库，目的是滚动动画，还有许多内置动画淡入淡出，淡入淡出等等（详见Github的自述文件）。您也可以参考Github中的源代码。

您可以参考Github自述文件页面中的使用文档。为了仅进行一次动画 - 第一次，您需要按以下方式初始化：

<script>
  AOS.init({
    once: true
  });
</script>

Javascript - 在视图中添加图像到div

2 个答案: