[Snippets] Is the element in viewport? Sáb 29 Nov 2014 - 22:02
Ae galera, segue um snippet para quem precisar verificar se o elemento está no viewport.
Faça o teste aqui na Best Skins mesmo, abra o console e digite o seguinte:
E vai retornar true, execute esse trecho denovo mas lá em baixo da página e vai ser false (:
Bem fácil, e extremamente útil.
Espero que gostem
@Edit:
Bom galera, estou editando o tópico aqui para tentar mostrar como funciona o código.
A primeira coisa a se fazer é entender o que é um viewport. Você pode ler esse artigo bem completo aqui:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Mas resumindo bastante, é basicamente a área visível do seu monitor, por exemplo, se notarem ao lado direito da tela existe a barra de rolagem, tudo que aparece dentro do seu navegador, ou seja tudo que está sendo renderizado para você agora (inclusive este texto) está dentro do viewport, ou seja está dentro da área visível do seu monitor.
Agora por exemplo o footer do fórum se encontra fora do viewport, já que ele não está visível.
O que esse código que mostrei (e o que o JScript mostrou também) faz é verificar se um elemento está dentro do viewport, e caso esteja ele retorna
Porém é necessário executar essa função juntamente com algum evento, já que ela não tem utilidade (na maioria dos casos) se precisar ser executada manualmente, por isso adicionamos a função dentro da função
Mas como funciona essa função? Primeiro vamos particiona-la
A primeira coisa que notamos é o seguinte:
Você pode ler a especificação completa dessa função aqui
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Depois de ler a documentação, vamos ver como funciona, primeiro vamos analisar o que está sendo feito ali.
Se notarem, essa função toma uma variável como parâmetro, se formos a função original e analisarmos, vamos verificar que essa variável é o elemento a ser verificado, então vamos fazer o teste com isso
Isso nos retorna um objeto chamado
Notem que são as informações precisas do elemento com relação do viewport.
Vamos avançar um pouquinho mais e chegamos ao seguinte
Se testarmos
Mais teoria: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Isso é apenas como um fallback para navegadores antigos que não aceitam o seguinte
Isso já explica boa parte do código
O operando
Ou seja, estamos falando com o navegador:
É bem simples essa parte...
O restante do código é apenas lógica, o operando
se (seria o if, mas nesse caso já fazemos o teste direto com
&& (e)
rect.left >= 0 (mesma lógica acima, mas para o valor a esquerda [left])
Acho que com o que aprendemos até agora já é possível interpretar o restante do código.
Eu não sou bom explicando as coisas, mas tentei elucidar bem o que é feito ali.
Espero que tenha ficado bom para entender e útil
- Código:
function isInViewport(element) {
var rect = element.getBoundingClientRect();
var html = document.documentElement;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || html.clientHeight) &&
rect.right <= (window.innerWidth || html.clientWidth)
);
}
// Usage
isInViewport(element);
Faça o teste aqui na Best Skins mesmo, abra o console e digite o seguinte:
- Código:
function isInViewport(element) {
var rect = element.getBoundingClientRect();
var html = document.documentElement;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || html.clientHeight) &&
rect.right <= (window.innerWidth || html.clientWidth)
);
}
isInViewport(document.querySelector('.post'));
E vai retornar true, execute esse trecho denovo mas lá em baixo da página e vai ser false (:
- Código:
isInViewport(document.querySelector('.post'));
Bem fácil, e extremamente útil.
Espero que gostem
@Edit:
Bom galera, estou editando o tópico aqui para tentar mostrar como funciona o código.
A primeira coisa a se fazer é entender o que é um viewport. Você pode ler esse artigo bem completo aqui:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Mas resumindo bastante, é basicamente a área visível do seu monitor, por exemplo, se notarem ao lado direito da tela existe a barra de rolagem, tudo que aparece dentro do seu navegador, ou seja tudo que está sendo renderizado para você agora (inclusive este texto) está dentro do viewport, ou seja está dentro da área visível do seu monitor.
Agora por exemplo o footer do fórum se encontra fora do viewport, já que ele não está visível.
O que esse código que mostrei (e o que o JScript mostrou também) faz é verificar se um elemento está dentro do viewport, e caso esteja ele retorna
true, caso contrário retorna
false.
Porém é necessário executar essa função juntamente com algum evento, já que ela não tem utilidade (na maioria dos casos) se precisar ser executada manualmente, por isso adicionamos a função dentro da função
onscroll()do Javascript, que vai ser executada toda vez que o usuário rolar o scroll da página, assim detectando se o elemento esta visível ou não.
Mas como funciona essa função? Primeiro vamos particiona-la
A primeira coisa que notamos é o seguinte:
- Código:
element.getBoundingClientRect();
Você pode ler a especificação completa dessa função aqui
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Depois de ler a documentação, vamos ver como funciona, primeiro vamos analisar o que está sendo feito ali.
Se notarem, essa função toma uma variável como parâmetro, se formos a função original e analisarmos, vamos verificar que essa variável é o elemento a ser verificado, então vamos fazer o teste com isso
- Código:
document.querySelector('.post').getBoundingClientRect();
Isso nos retorna um objeto chamado
ClientRectcom as seguintes informações
- Código:
ClientRect {
height: 1033.390625,
width: 1192.09375,
left: 78.453125,
bottom: 1588.28125,
right: 1270.546875,
top: 554.890625,
width: 1192.09375
}
Notem que são as informações precisas do elemento com relação do viewport.
Vamos avançar um pouquinho mais e chegamos ao seguinte
- Código:
var html = document.documentElement;
Se testarmos
document.documentElement;no console vemos que ele apenas retorna todo o HTML do site;
Mais teoria: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Isso é apenas como um fallback para navegadores antigos que não aceitam o seguinte
window.innerHeightque retorna para nós o tamanho exato da altura do viewport do usuário.
Isso já explica boa parte do código
window.innerHeight || html.clientHeightPara pegar a altura do viewport
window.innerWidth || html.clientWidthPara pegar a largura do viewport
O operando
||significa "ou".
Ou seja, estamos falando com o navegador:
Navegador, por favor, tente pegar owindow.innerWidthpara mim, mas caso não consiga (ou ||) tente com ohtml.clientWidth
É bem simples essa parte...
O restante do código é apenas lógica, o operando
&&significa "e" ou seja a nossa função vai retornar true quando todas as condições testadas forem verdadeiras.
se (seria o if, mas nesse caso já fazemos o teste direto com
return()) rect.top >= 0 (o valor top que pegamos com a variável rect for maior ou igual a 0)
&& (e)
rect.left >= 0 (mesma lógica acima, mas para o valor a esquerda [left])
Acho que com o que aprendemos até agora já é possível interpretar o restante do código.
Eu não sou bom explicando as coisas, mas tentei elucidar bem o que é feito ali.
Espero que tenha ficado bom para entender e útil