Resumo : neste tutorial, você aprenderá como verificar se um elemento está visível na viewport usando JavaScript.
Quando um elemento está na viewport, ele aparece na parte visível da tela.
Para verificar se um elemento está visível na viewport, use a seguinte isInViewport()função auxiliar:
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)
);
}
Linguagem de código: JavaScript ( javascript )Se o elemento estiver na viewport, a função retornará true. Caso contrário, ele retorna false.
Verificar se um elemento está visível na viewport tem muitas aplicações, por exemplo:
- Execute imagens de carregamento lento. Você só carrega a imagem se seu contêiner estiver visível na viewport atual. Isso aumenta a velocidade de carregamento da página.
- Carregue um script para exibir os anúncios se estiver na janela de visualização. Isso economiza muito dinheiro para os anunciantes gastarem em impressões que os usuários podem não ver nos anúncios abaixo da dobra.
Vamos mergulhar na isInViewport()função para entender como ela funciona.
Obtendo a posição relativa de um elemento
O método element.getBoundingClientRect()fornece a posição do elemento e sua posição relativa na viewport.
Ele retorna um objeto que inclui a altura, largura e distância do elemento da parte superior, esquerda, inferior e direita da janela de visualização.
Suponha que você tenha <div>o seguinte elemento:
<div class="box"></div>Linguagem de código: HTML, XML ( xml )Para obter a <div>posição do elemento na viewport, você usa o getBoundingClientRect()método:
const box = document.querySelector('.box');
const rect = box.getBoundingClientRect();
console.log(rect);
Linguagem de código: JavaScript ( javascript )Saída:
{
x: 100
y: 182
width: 300
height: 250
top: 182
right: 400
bottom: 432
left: 100
}
Linguagem de código: CSS ( css )Se o <div>elemento estiver na viewport, sua parte superior e esquerda serão sempre maiores ou iguais a zero. Além disso, sua distância da direita é menor ou igual à largura da janela de visualização e a distância do ID da parte inferior é menor ou igual à altura da janela de visualização.
Para obter a largura e a altura da janela de visualização, você usa window.innerWidthe window.innerHeightnos navegadores modernos. Alguns navegadores, no entanto, usam as document.documentElement.clientWidthextensões e document.documentElement.clientHeight.
Para oferecer suporte a todos os navegadores, você pode tentar um e usar outro, assim:
const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;Linguagem de código: JavaScript ( javascript )O seguinte detecta se o <div>elemento está na viewport:
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);Linguagem de código: JavaScript ( javascript )Portanto, você pode agrupar a lógica em uma função auxiliar isInViewport()e usá-la da seguinte maneira:
const box = document.querySelector('.box');
const result = isInViewport(box);Linguagem de código: JavaScript ( javascript )Ao rolar o documento, a caixa não estará na janela de visualização. Para monitorar isso, você pode ouvir o evento scroll e mostrar o resultado em outro elemento div.
O seguinte mostra a página 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>Linguagem de código: HTML, XML ( xml )Aqui está o arquivo 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
});
Linguagem de código: JavaScript ( javascript )Saída:
Resumo
- Use o
getBoundingClientRect()método para obter o tamanho do elemento e sua posição relativa na janela de visualização. - Compare a posição do elemento com a altura e largura da viewport para verificar se o elemento está visível na viewport ou não.
