Почему мой Intersection Observer запускает коллбэк сразу, а не тогда, когда элемент реально появляется на странице?

Question

[Евгения]

Задача такая: есть список из 100 участников конкурса, в этом списке есть пользователь. Чтобы пользователю было удобнее, внизу страницы есть закрепленная плашка с его местом и кнопкой, которая перемотает список до его места в нем.
Есть ситуация, что пользователь может сам до себя домотаться и тогда кнопка должна пропасть. Я решила использовать Intersection Observer для этой цели. Но кнопка пропадает сразу! и если в качестве колбэка я передаю вывод в консоль, то он тоже происходит сразу.
Что я сделала неправильно?

const createAnchor = (current) => {
    let players = playersList.children;
    players[current.place - 1].id = 'current-in-the-list';
    players[current.place - 1].classList.add('current-player')
    
    const anchor = document.createElement('a');
    anchor.id = 'scroll-to-me-link';
    anchor.href = '#current-in-the-list';
    
    if (current.place <= 100 && current.place > 5) {
        currentPlayerAction.append(anchor);
        currentPlayerAction.classList.add('ready');

        const observer = new IntersectionObserver(() => {
            // currentPlayerAction.classList.remove('ready');
            console.log(document.querySelector('#current-in-the-list'));
        }, {threshold: 1, rootMargin: "-150px",});
         observer.observe(document.querySelector('#current-in-the-list'));

        window.addEventListener('scroll', () => {
            if (window.scrollY === 0) {
                currentPlayerAction.classList.add('ready'); 
            }
        })

        currentPlayerAction.addEventListener('click', () => {
            currentPlayerAction.classList.remove('ready'); 
        });
    }
}

Answer 1

[daedra93]

Потому что он так работает, используйте "isIntersecting" в колбеке

Comments

[Евгения]

мне это было не очевидно, большое спасибо!

[daedra93]

AlexandraWeather, пожалуйста