Как проверить, виден ли элемент после прокрутки?

Иногда нам, возможно, придется проверять, виден ли элемент после прокрутки.

В этой статье мы рассмотрим, как проверить, отображается ли элемент после прокрутки с помощью JavaScript.

Создайте свою собственную функцию

Мы можем создать нашу собственную функцию, чтобы проверять, виден ли элемент после прокрутки.

Например, мы можем написать следующий HTML:

<div>
</div>

И следующий JavaScript:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.id = `el-${i}`
  p.textContent = 'hello'
  div.appendChild(p)
}
const isScrolledIntoView = (el) => {
  const {
    top,
    bottom
  } = el.getBoundingClientRect();
  const elemTop = top;
  const elemBottom = bottom;
  const isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  return isVisible;
}
const el = document.querySelector('#el-50')
document.addEventListener('scroll', (e) => {
  console.log(isScrolledIntoView(el))
})

Мы получаем элемент div с querySelector.

Затем у нас есть цикл for для вставки p элементов в div.

Мы устанавливаем свойство id, чтобы мы могли получить вставленный элемент позже.

Затем мы создаем функцию isScrolledIntoView, чтобы проверить, находится ли элемент на экране браузера.

Для этого мы вызываем el.getBoundingClientRect, чтобы получить координаты top и bottom элемента.

Это верхняя и нижняя координаты Y соответственно.

Затем мы возвращаем переменную isVisible, которую создаем, проверяя, больше ли top или равно 0, а bottom меньше или равно innerHeight окна.

Если оба условия верны, то мы знаем, что элемент находится в окне.

Затем мы получаем элемент, который хотим наблюдать, с помощью другого querySelector вызова.

И, наконец, мы вызываем addEventListener, чтобы добавить событие прокрутки в документ, и вызываем функцию isScrolledIntoView с элементом el, чтобы увидеть, когда el находится в окне браузера.

Прокручивая страницу вниз, мы должны увидеть, что зарегистрированное значение изменяется от false до true и обратно до false.

Использование API-интерфейса Intersection Observer

IntersectionObserver API - это API, доступный в последних версиях браузеров, позволяющий нам проверять, отображается ли элемент на экране.

Например, мы можем написать:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.id = `el-${i}`
  p.textContent = 'hello'
  div.appendChild(p)
}
const onIntersection = (entries, opts) => {
  entries.forEach(entry => {
    const visible = entry.intersectionRatio >= opts.thresholds[0]    
    console.log(entry.intersectionRatio.toFixed(2), visible)
  })
}
const intersectionObserverOptions = {
  root: null,
  threshold: .5
}
const observer = new IntersectionObserver(onIntersection, intersectionObserverOptions)
const target = document.querySelector('#el-50')
observer.observe(target)

Первый вызов querySelector и цикл for такие же, как и раньше.

Затем мы определяем функцию onIntersection, которая принимает параметры entries и opts.

entries - это элементы, за которыми мы следим.

И opts - это объект параметров, у которого есть свойство thresholds для получения порога пересечения с экраном.

В обратном вызове forEach у нас есть переменная visible, которую мы создаем, сравнивая intersectionRatio из entry с первым значением threasholds в opts,

Мы знаем, что это видно, если intersectionRatio больше порогового значения.

Затем мы регистрируем значение visible и intersectionRatio.

Затем у нас есть interswedtiobnObserverOptions, чтобы установить порог перекрестка, чтобы он был виден.

Затем мы передаем их конструктору IntersectionObserver.

Затем мы вызываем observer.observe с элементом target, чтобы посмотреть, виден он или нет.

Заключение

Мы можем сравнить положение элемента или использовать API IntersectionObserver, чтобы проверить, виден ли элемент после прокрутки.