Intersection Observer API Fires回调甚至元素不在视图中

Question

Intersection Observer API Fires回调甚至元素不在视图中

Moh*_*ain 5 javascript firefox google-chrome intersection

我试图找到元素在屏幕上的时间(试图实现无限加载器).

将Observer绑定到列表中的最后一项并监听,不幸的是在chrome 62 mac 10.10中,回调即使是我正在观察的元素也不在视口中.

当我检查交叉比时,我可以很容易地防止它.这是Intersection Observer的工作方式吗？

在此先感谢您的帮助.

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

}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 16

事实上,你已经触及了一些看似违反直觉的东西.

当IntersectionObserver被实例化时,回调被运行一次作为检测元素是否在视图中(并且如果isIntersecting属性不在视图中,则正确地报告isIntersecting属性为false).

最简单的方法是在运行任何仅在元素实际可见时启动的功能之前检查.isIntersecting.

希望这有助于确认您在检查这些事情时走在正确的道路上,您没有犯过任何错误.

归档时间：	8 年，5 月前
查看次数：	3028 次
最近记录：	7 年，12 月前