Почему мой Intersection Observer запускает коллбэк сразу, а не тогда, когда элемент реально появляется на странице?
Задача такая: есть список из 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'); }); } } |
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'); }); } }
Дополнительно:
Потому что он так работает, используйте "isIntersecting" в колбеке
- мне это было не очевидно, большое спасибо!
- AlexandraWeather, пожалуйста
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Intersection Observer API позволяет отслеживать, когда целевой элемент находится в пределах видимости пользователя или другого контейнера. Однако, иногда может возникнуть проблема, когда коллбэк запускается сразу, а не когда элемент действительно появляется на странице. Это может происходить из-за нескольких причин, и вот некоторые из них:
1. Неправильное определение целевого элемента: убедитесь, что вы правильно указали целевой элемент, который должен быть наблюдаемым. Если вы передаете неверный селектор или элемент, то коллбэк может быть вызван сразу.
2. Неправильные настройки Intersection Observer: убедитесь, что вы правильно настроили Intersection Observer, включая правильные опции, такие как `root`, `rootMargin` и `threshold`. Неправильные настройки могут привести к непредвиденному поведению.
3. Проблемы с CSS: иногда элемент может быть скрыт или иметь нулевые размеры из-за стилей CSS. Удостоверьтесь, что ваш элемент правильно отображается на странице.
4. Проблемы с рендерингом страницы: если ваша страница динамически загружает контент или использует анимации, то элемент может появиться на странице позже, чем ожидалось. В этом случае, вы можете попробовать задержать инициализацию Intersection Observer или использовать другие методы отслеживания видимости элемента.
В целом, чтобы исправить проблему с тем, что коллбэк Intersection Observer запускается сразу, вам нужно внимательно проверить вышеуказанные причины и убедиться, что ваш код правильно настроен и соответствует ожидаемому поведению.