Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

waghcwb waghcwb  • Sáb 29 Nov 2014 - 22:02

[Snippets] Is the element in viewport? Empty [Snippets] Is the element in viewport? Sáb 29 Nov 2014 - 22:02

Reputação da mensagem: 100% (1 votos)
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:
[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
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: [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.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 Sáb 29 Nov 2014 - 23:42, editado 1 vez(es)

JScript JScript  • Sáb 29 Nov 2014 - 22:41

[Snippets] Is the element in viewport? Empty Re: [Snippets] Is the element in viewport? Sáb 29 Nov 2014 - 22:41

Reputação da mensagem: 100% (1 votos)
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

waghcwb waghcwb  • Sáb 29 Nov 2014 - 23:44

[Snippets] Is the element in viewport? Empty Re: [Snippets] Is the element in viewport? Sáb 29 Nov 2014 - 23:44

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

Conteúdo patrocinado  • 

[Snippets] Is the element in viewport? Empty Re: [Snippets] Is the element in viewport?

Tópicos semelhantes
Permissões neste sub-fórum
Não podes responder a tópicos