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

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

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

我已经检查过了，并找到了类似的解决方案，但我不知道如何在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');
        }
    }
});

函数Utils（）{
}
Utils.prototype={
构造函数：Utils，
IsElementView：函数（el、FullyView）{
var rect=el.getBoundingClientRect（）；
var elemTop=rect.top；
var elemBottom=矩形底部；
//只有完全可见的元素返回true：
变量isVisible=（elemTop>=0）和&（elemBottom=0；
返回是可见的；
}
};
var Utils=新Utils（）；
var matches=document.queryselectoral（“div.twinpine-container”）；
window.addEventListener（“滚动”），函数（）{
对于（var i=0；i

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

是一个非常轻量级的库，用于滚动动画，有许多内置动画淡入淡出、淡入淡出等（在Github的自述页面中详细介绍）。您也可以参考Github中的源代码

您可以参考Github自述页面中的使用说明文档。为了只制作一次动画（第一次），您需要按照以下方式进行初始化：

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

AOS.init({
一次：对
});

差不多了。有两个问题：你需要知道

什么时候是可见的

变化，而不仅仅是它是什么-因此你必须存储以前的结果并比较它们。存储它的一个简单方法是在元素上使用类

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

功能检查可见性（元素）{
var rect=el.getBoundingClientRect（）；
var elemTop=rect.top；
var elemBottom=矩形底部；
变量isVisible=（elemTop>=0）和（elemBottom我没有答案，但如果你能提供一个非常有用的代码片段或JSFIDLE示例。尝试使用intersection observer API。谢谢Ben，它可以设置数据属性，但不会启动console.log on scroll。我必须承认，我没有测试它。如果你记录
可见性
对象会怎么样？是的，它会改变滚动时。根据div是否在视图中，将可见设置为true或false。输入仅在第一次触发，这很好。退出从未更改为true。这很奇怪。请将其放入JSFIDLE中好吗？哦，明白了-写入
el.dataset
强制为字符串。我不知道。您可以添加/删除一个类，我会的更新我的答案。
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();