当顶部边框触及视口顶部时获取 div 的数据

Question

Three divs on a page - each of them has 100vh height.

By scrolling up and down, I need to get data-x of a div when its top border touches the top of viewport.

And only when scrolling, not by loading the page.

In the example below on scrolling down console should be:

ipsum
dolor

and on scrolling back to top:

ipsum
lorem

Here is my try, but without success to get such a control.

please help

 var cards = [...document.querySelectorAll('.card')] let options = { rootMargin: '100%' }; function onIntersect(entries) { entries.forEach((entry) => { console.log(entry.target.dataset.x); }); } const io = new IntersectionObserver(onIntersect, options) cards.forEach((card) => { io.observe(card) })

 .card{height:100vh;}.carda{background:orange;}.cardb{background:lightblue;}.cardc{background:silver;}

 <div class='card carda' data-x='lorem'></div> <div class='card cardb' data-x='ipsum'></div> <div class='card cardc' data-x='dolor'></div>

Answer 1

You have to detect if the page was scrolled , and console.log only that card which isIntersecting :

 var scrolled = false; document.addEventListener('scroll', () => scrolled = true, {once: true}); var cards = [...document.querySelectorAll('.card')] let options = { threshold: .7 }; function onIntersect(entries) { entries.forEach((entry) => { if (scrolled && entry.isIntersecting) { console.log(entry.target.dataset.x); } }); } const io = new IntersectionObserver(onIntersect, options) cards.forEach((card) => { io.observe(card) })

 .card { height: 100vh; }.carda { background: orange; }.cardb { background: lightblue; }.cardc { background: silver; }

 <div class='card carda' data-x='lorem'></div> <div class='card cardb' data-x='ipsum'></div> <div class='card cardc' data-x='dolor'></div>