Intersection Observer API Fires callback even element is not in view
Question
I am trying to find when the element is on screen(trying to implement the infinite loader).
Bind the Observer for last item in the list and listening, unfortunately in chrome 62 mac 10.10 , call back is firing even the element which I am observing is not in viewport.
I could prevent it easily when I check the intersection ratio. is this the way Intersection Observer will work?
Thanks in advance for any help.
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 answers
solution1
15 ACCPTED 2017-12-17 13:13:55
Indeed you've touched something which seems counter-intuitive.
When the IntersectionObserver is instantiated the callback is ran once as a detection whether the element is in view or not (and correctly reports the isIntersecting attribute as false if it's not in view).
The simplest way to go about it is by checking against the .isIntersecting before running any functionality that should only kick in when the element is actually visible.
Hope this helps confirming you were on the right path while checkin for those things, you haven't done any mistakes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.