Tengo este código donde, cuando me desplazo hacia abajo, agrego nuevos elementos.

 <div class="card-container"> <div class="card show">First card</div> <div class="card">card</div> <div class="card">card</div> <div class="card">card</div> <div class="card">card</div> <div class="card">card</div> <div class="card">card</div> <div class="card">card</div> <div class="card">card</div> </div>

JS

 const cards = document.querySelectorAll('.card'); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { entry.target.classList.toggle('show', entry.isIntersecting); }) }) const lastCardObserver = new IntersectionObserver(entries => { const lastCard = entries[0]; if(!lastCard.isIntersecting) return loadNewCards(); lastCardObserver.unobserve(lastCard.target); lastCardObserver.observe(document.querySelector('.card:last-child')); }, {rootMargin: '200px'}) const cardContainer = document.querySelector('.card-container'); function loadNewCards() { for(let i = 0;i < 10;i++) { const card = document.createElement('div'); card.textContent = 'new card'; card.classList.add('card'); card.classList.add(`card-${i}`); observer.observe(card); cardContainer.append(card); } } cards.forEach(card => { observer.observe(card); }) lastCardObserver.observe(document.querySelector('.card:last-child'))

TODO FUNCIONA BIEN

pero necesito ahora cuando estoy al principio en el elemento que está en la ventana gráfica, mientras me desplazo hacia arriba para agregar nuevos elementos para detectar que estoy desplazado al primer elemento en la ventana gráfica

Cómo puedo hacer eso

Lo intenté

 this.firstCardObserver = new IntersectionObserver(entries => { const firstCard = entries[0]; if (!firstCard.isIntersecting) return; this.loadBefore(); }, { rootMargin: '200px' , threshold: 0.5 }) this.firstCardObserver.observe(document.querySelector('.card:first-child'))

pero parece que no funciona. Siempre obtengo datos nuevos cuando llego inicialmente a mi página