7 способов проверить видимость элемента после прокрутки на JavaScript

Введение

При разработке веб-приложений часто возникает необходимость проверить, видим ли определенный элемент на странице после прокрутки. Это может быть полезно, например, при реализации бесконечной прокрутки или для отображения анимации только тогда, когда элемент становится видимым для пользователя. В этой статье мы рассмотрим 7 различных способов проверки видимости элемента после прокрутки с использованием JavaScript.

1. Intersection Observer API

Intersection Observer API – это новое API, доступное в большинстве современных браузеров. Оно позволяет отслеживать пересечение заданного элемента с видимой частью окна браузера или другого элемента. Для использования API необходимо создать экземпляр класса IntersectionObserver и передать в него функцию обратного вызова, которая будет вызываться при каждом изменении видимости элемента.

const element = document.querySelector('.my-element');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // элемент видимый
    } else {
      // элемент не видимый
    }
  });
});

observer.observe(element);

2. getBoundingClientRect() метод

Второй способ проверки видимости элемента – использование метода getBoundingClientRect(). Этот метод возвращает объект с информацией о размерах и позиции элемента относительно окна просмотра. Если верхняя граница элемента меньше нижней границы окна и нижняя граница элемента больше верхней границы окна, то элемент находится внутри видимой области.

const element = document.querySelector('.my-element');
const rect = element.getBoundingClientRect();

if (
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  rect.right <= (window.innerWidth || document.documentElement.clientWidth)
) {
  // элемент видимый
} else {
  // элемент не видимый
}

3. Расчет видимости элемента вручную

Еще один способ проверки видимости элемента – вручную расчитать его позицию и позицию окна просмотра, используя значения scrollHeight, scrollTop, offsetHeight и clientHeight. Если верхняя граница элемента меньше суммы прокрутки и высоты окна просмотра, а нижняя граница элемента больше суммы прокрутки, то элемент видим.

const element = document.querySelector('.my-element');

const isElementVisible = () => {
  const scrollPosition = window.pageYOffset;
  const elementTop = element.offsetTop;
  const elementHeight = element.offsetHeight;

  if (elementTop < (scrollPosition + window.innerHeight) && elementTop + elementHeight >= scrollPosition) {
    // элемент видимый
  } else {
    // элемент не видимый
  }
};

window.addEventListener('scroll', isElementVisible);

4. jQuery isVisible() метод

Если вы используете jQuery, то можете воспользоваться удобным методом isVisible(), который проверяет, видим ли элемент на странице после прокрутки. Метод возвращает true, если элемент видим, и false в противном случае.

const element = $('.my-element');

if (element.isVisible()) {
  // элемент видимый
} else {
  // элемент не видимый
}

5. Положение элемента в отношении окна просмотра

Другой способ проверки видимости элемента – сравнить положение верхней и нижней границ элемента относительно верхней и нижней границ окна просмотра. Если верхняя граница элемента находится ниже верхней границы окна и нижняя граница элемента выше нижней границы окна, то элемент видим.

const element = document.querySelector('.my-element');
const elementTop = element.getBoundingClientRect().top;
const elementBottom = element.getBoundingClientRect().bottom;

if (elementTop >= 0 && elementBottom <= window.innerHeight) {
  // элемент видимый
} else {
  // элемент не видимый
}

6. Проверка видимости элемента на основе прокрутки

Дополнительный способ проверки видимости элемента – определить значение прокрутки окна и сравнить его с верхней и нижней границей элемента. Если значение прокрутки меньше верхней границы элемента и больше нижней границы элемента, то элемент находится в видимой области.

const element = document.querySelector('.my-element');
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

if (scrollPosition > element.offsetTop && scrollPosition < (element.offsetTop + element.offsetHeight)) {
  // элемент видимый
} else {
  // элемент не видимый
}

7. Проверка видимости элемента с использованием isVisible() библиотеки

Наконец, вы можете воспользоваться сторонней библиотекой, например, isVisible.js, которая предоставляет удобный способ проверки видимости элемента. Просто подключите библиотеку к своему проекту и используйте метод isVisible() для проверки видимости элемента.

const element = document.querySelector('.my-element');

if (isVisible(element)) {
  // элемент видимый
} else {
  // элемент не видимый
}

Заключение

В этой статье мы рассмотрели 7 различных способов проверки видимости элемента после прокрутки на JavaScript. Вам необходимо выбрать наиболее подходящий способ в зависимости от требований вашего проекта и предпочтений разработчика. Используя эти методы, вы сможете управлять отображением и взаимодействием с элементами в зависимости от их видимости на странице, обеспечивая лучший пользовательский опыт.