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

Question

我试图找到元素在屏幕上的时间（试图实现无限加载器）。

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

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

Answer 1

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

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

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

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

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

问题描述

1 个解决方案

解决方案1
15 已采纳 2017-12-17 13:13:55

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

问题描述

1 个解决方案

解决方案1 15 已采纳 2017-12-17 13:13:55

解决方案1
15 已采纳 2017-12-17 13:13:55