Você não está conectado. Conecte-se ou registre-se

[Snippets] Is the element in viewport?

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1Info [Snippets] Is the element in viewport? em Sab Nov 29, 2014 10:02 pm

waghcwb

avatar
Membro elite

Ae galera, segue um snippet para quem precisar verificar se o elemento está no viewport.

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 study




@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:
http://msdn.microsoft.com/en-us/library/ff634571.aspx

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
https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

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
ClientRect
com 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: https://developer.mozilla.org/en-US/docs/Web/API/document.documentElement

Isso é apenas como um fallback para navegadores antigos que não aceitam o seguinte
window.innerHeight
que 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.clientHeight
Para pegar a altura do viewport
window.innerWidth || html.clientWidth
Para pegar a largura do viewport

O operando
||
significa "ou".

Ou seja, estamos falando com o navegador:
Navegador, por favor, tente pegar o
window.innerWidth
para mim, mas caso não consiga (ou ||) tente com o
html.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 study



Última edição por waghcwb em Sab Nov 29, 2014 11:42 pm, editado 1 vez(es)



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

2Info Re: [Snippets] Is the element in viewport? em Sab Nov 29, 2014 10:41 pm

JScript

avatar
Membro elite

Legal amigo!

Eu uso sempre isso em meus códigos que fazem requisições e não aparecem logo na tela, ficam lá por baixo...

Veja essa função que eu fiz há um bom tempo:
Código:

<div id="example">
    <span style="display: none;">Esta frase só irá aparecer quando o elemento "example" estiver visível na tela!</span>
</div>


<script type="text/javascript">
//<![CDATA[
/* Call your function using runMyCode() function. */
runMyCode("example", "MyFunction");

/* Your function to run only if the element #example is visible in view window! */
function MyFunction(){
    jQuery('#example').show();
}

/***********************************************************************
 * Only run your function if is visible in browser window (view port)!!!
 * Version: 1.23 - 2013/08/23
 * Made by: João Carlos (JScript Brasil at live dot com)
 * More in: www.punbb.forumeiros.com
 ***********************************************************************/

/***
* Function.....: runMyCode(elem, funcName)
* Description..: Function to fire event for 'scroll' to run your code/function...
* params.......:
*              elen    = element (not class!)
*              funcName = the name of your function!
* Return.......: Runs your function!
*/
function runMyCode(elem, funcName) {
    jQuery(window).on('scroll.' + funcName, __runMyCode(document.getElementById(elem), funcName));
}

/* Function to check if an element is visible in view port */
function isInViewPort(elem) {
   var rect = elem.getBoundingClientRect();

   return (
   rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or jQuery(window).height() */
   rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or jQuery(window).width() */ );
}

/* Your function only runs if is visible in view port!!! */
function __runMyCode(elem, funcName) {
   return function() {
        /* Chech if the element is visible in view port! */
      if (isInViewPort(elem)) {
            /* If visible, stop event!!! */
         jQuery(window).off('scroll.' + funcName);
            return funcName;
      }
   }
}
//]]>
</script>
Você pode utilizar com qualquer código que fique em widget ou não!

Nota: É bom você explicar o que é viewport pro pessoal ai...

JS



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...


Ver perfil do usuário http://jscript.forumeiros.com/

3Info Re: [Snippets] Is the element in viewport? em Sab Nov 29, 2014 11:44 pm

waghcwb

avatar
Membro elite

Muito bom JScript,

Veja como estou usando essa função
Código:
window.onscroll = function() {
   if(database('.element').inViewport()) console.info("The element is in the viewport (:");            
};

É para um projetinho que está saindo aqui em breve hehehehe

Tentei fazer uma explicação bacana para o pessoal ai, espero que eles gostem e nos deem retorno né cheers

Até mais



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum