代码之家 › 专栏 › 技术社区 › Mohamed Hussain

即使元素不在视图中,交叉点观察者API也会触发回调

intersection firefox google-chrome javascript

Mohamed Hussain · 技术社区 · 7 年前

我试图找到元素何时出现在屏幕上(试图实现无限加载程序)。

将观察者绑定到列表中的最后一个项目,然后侦听,不幸的是,在chrome 62 mac 10.10中,回调正在启动,即使我正在观察的元素不在视口中。

当我检查交叉比时,我可以很容易地防止它。这是十字路口观察员的工作方式吗?

提前感谢您的帮助。

bindIO();


function ioCallback(entries, observer) {
    console.log("entries");
    console.log(entries);
    entries.forEach(entry => {
        // Each entry describes an intersection change for one observed
        // target element:
        console.log(entry.boundingClientRect);
        console.log(entry.intersectionRatio);
        console.log(entry.intersectionRect);
        console.log(entry.isIntersecting);
        console.log(entry.rootBounds);
        console.log(entry.target);
        console.log(entry.time);
    });
}

function bindIO(arguments) {
    var options = {
        threshold: 1.0
    }

    observer = new IntersectionObserver(ioCallback, options);
}
var triggerel;
var lastIndex;
var items;
var observer;

setTimeout(function() {
    observeEl();
}, 2000);


function observeEl(arguments) {
    items = document.querySelectorAll('.item');
    lastIndex = items.length
    triggerel = items[lastIndex - 1];
    observer.observe(triggerel);

}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
        <title>HTML BolierPlate</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css"></link>
        <link rel="stylesheet" type="text/css"  href="css/mystyle.css"></link>
        <style>
            .item{

                background: green;
                margin: 30px;
                height: 400px;
                width: 400px;
                color: black;
                font-weight: black;
            }
            
        </style>

    </head>

    <body>
        
        Welcome to BoilerPlate!!!
        


        <div class="item-1 item">
            
            Items #1 

        </div>

        <div class="item-2 item">
            
            Items #2 

        </div>

        <div class="item-3 item">
            
            Items #3 

        </div>

        <div class="item-4 item">
            
            Items #4 

        </div>

        <div class="item-5 item">
            
            Items #5 

        </div>

        <div class="item-6 item">
            
            Items #6 

        </div>

        <div class="item-7 item">
            
            Items #7 

        </div>

        <div class="item-8 item">
            
            Items #8 

        </div>

        

        <script src="js/lib/jquery.min.js" ></script>
        <script src="js/myscript.js" ></script>
       
    </body>
</html>

1 回复 | 直到 3 年前

MANSOOR KOCHY 3 年前

事实上,你触摸到了一些似乎违反直觉的东西。

当IntersectionObserver被实例化时,回调将运行一次,以检测元素是否在视图中(如果元素不在视图中,则正确地将相交属性报告为false)。

最简单的方法是对照 .isIntersecting 属性,然后运行任何只应在元素实际可见时启动的功能。

let observer = new IntersectionObserver(function (entries){
        entries.forEach(function(each,index){
            if(each.isIntersecting){
                console.log(each,each.isIntersecting);
            }
        })
    });

在上述解决方案中,如果 isIntersecting 属性为 true . 和 isIntersecting(isIntersecting) 属性为 真的 ,仅当元素真正可见时(根据 threshold 观察者配置中的定义)既不在实例化中,也不在目标消失中。

希望这有助于确认你在正确的道路上,同时检查这些事情,你没有犯任何错误。