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