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

Краткое описание: в этом уроке вы узнаете, как проверить, виден ли элемент в области просмотра, используя JavaScript.

Когда элемент находится в области просмотра, он отображается в видимой части экрана.

Чтобы проверить, виден ли элемент в области просмотра, используется следующая вспомогательная функция isInViewport():

function isInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); }
Code language: JavaScript (javascript)

Если элемент находится в области просмотра, функция возвращает true. В противном случае она возвращает false.

Проверка видимости элемента в области просмотра имеет множество применений, например:

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

Давайте погрузимся в функцию isInViewport(), чтобы понять, как она работает.

Получение относительного положения элемента

Метод element.getBoundingClientRect() предоставляет позицию элемента и его относительное положение относительно области просмотра.

Он возвращает объект, который включает высоту, ширину элемента и его расстояние от верхней, левой, нижней и правой частей области просмотра.

Предположим, что у вас есть элемент <div> следующего вида:

<div class="box"></div>
Code language: HTML, XML (xml)

Чтобы получить положение элемента <div> в области просмотра, вы используете метод getBoundingClientRect():

const box = document.querySelector('.box'); const rect = box.getBoundingClientRect(); console.log(rect);
Code language: JavaScript (javascript)

Вывод:

{ x: 100 y: 182 width: 300 height: 250 top: 182 right: 400 bottom: 432 left: 100 }
Code language: CSS (css)

Если элемент <div> находится в области просмотра, его верх и лево всегда больше или равны нулю. Кроме того, его расстояние от правого края меньше или равно ширине области просмотра, а расстояние от нижнего края меньше или равно высоте области просмотра.

Чтобы получить ширину и высоту области просмотра, вы используете window.innerWidth и window.innerHeight в современных браузерах. Однако некоторые браузеры используют document.documentElement.clientWidth и document.documentElement.clientHeight.

Для поддержки всех браузеров вы можете попробовать использовать один из них и вернуться к другому, например, так:

const viewportWidth = window.innerWidth || document.documentElement.clientWidth; const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
Code language: JavaScript (javascript)

Следующее определение определяет, находится ли элемент <div> в области просмотра:

const box = document.querySelector('.box'); const rect = box.getBoundingClientRect(); const isInViewport = rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth); console.log(isInViewport);
Code language: JavaScript (javascript)

Следовательно, вы можете обернуть логику в вспомогательную функцию isInViewport() и использовать ее следующим образом:

const box = document.querySelector('.box'); const result = isInViewport(box);
Code language: JavaScript (javascript)

Когда вы прокручиваете документ, поле не будет находиться в области просмотра. Чтобы контролировать это, можно прослушать событие прокрутки и показать результат в другом элементе div.

Ниже показана HTML-страница:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Check if an element is visible in the viewport</title> <link rel="stylesheet" href="css/style-viewport.css"> </head> <body> <div class="box"></div> <div id="message">Please scroll to check if the box is visible</div> <script src="js/app.js"></script> </body> </html>
Code language: HTML, XML (xml)

Вот файл JavaScript:

function isInViewport(el) { const rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } const box = document.querySelector('.box'); const message = document.querySelector('#message'); document.addEventListener('scroll', function () { const messageText = isInViewport(box) ? 'The box is visible in the viewport' : 'The box is not visible in the viewport'; message.textContent = messageText; }, { passive: true });
Code language: JavaScript (javascript)

Вывод:

Demo

Резюме

  • Используйте метод getBoundingClientRect(), чтобы получить размер элемента и его относительное положение в области просмотра.
  • Сравните положение элемента с высотой и шириной области просмотра, чтобы проверить, виден ли элемент в области просмотра или нет.

Оцените статью
devanswers.ru
Добавить комментарий