in view

in-view.js?

Seja notificado quando um elemento DOM entrar ou sair da janela de visualização. Um pequeno utilitário javascript (~ 1,9kb compactado com gzip), livre de dependências para IE9 +.

camwiegert.github.io/in-view

---

Instalação

Baixe a versão mais recente e inclua-a em sua marcação ou instale com npm:

npm install --save in-view

---

Uso Básico

Com a visualização, você pode registrar manipuladores que são chamados quando um elemento entra ou sai da viewport. Cada manipulador recebe um elemento, aquele que entra ou sai da viewport, como seu único argumento.

 inView ( '.someSelector' )
    . on ( 'enter' , doSomething )
    . on ( 'exit' , el => {
        el . style . opacity = 0.5 ;
    } ) ; 

---

API

in-view mantém um registro de manipulador separado para cada conjunto de elementos capturados com inView(<selector>) . Cada registro expõe os mesmos quatro métodos. in-view também expõe quatro métodos de nível superior. ( is , offset , threshold , test ).

inView(<seletor>).on(<evento>, <manipulador>)

Registre um manipulador para os elementos selecionados pelo selector para event . Os únicos eventos emitidos à vista são 'enter' e 'exit' .

 inView ( '.someSelector' ) . on ( 'enter' , doSomething ) ;

inView(<seletor>).once(<evento>, <manipulador>)

Registre um manipulador para os elementos selecionados pelo selector para event . Os manipuladores registrados once serão chamados apenas uma vez.

 inView ( '.someSelector' ) . once ( 'enter' , doSomething ) ;

inView.is(<elemento>)

Verifique se element está na viewport.

 inView . is ( document . querySelector ( '.someSelector' ) ) ;
// => true

inView.offset(<deslocamento>)

Por padrão, a visualização considera algo na janela de visualização se quebrar alguma borda da janela de visualização. Isto pode ser usado para definir um deslocamento daquela borda. Por exemplo, um deslocamento de 100 considerará elementos na viewport se eles quebrarem qualquer borda da viewport em pelo menos 100 pixels. offset pode ser um número inteiro positivo ou negativo.

 inView . offset ( 100 ) ;
inView . offset ( - 50 ) ;

O deslocamento também pode ser definido por direção, passando um objeto.

 inView . offset ( {
    top : 100 ,
    right : 75 ,
    bottom : 50 ,
    left : 25
} ) ;

inView.threshold(<limite>)

Defina a proporção entre a altura e a largura de um elemento que precisa estar visível para que seja considerado na viewport. O padrão é 0 , significando qualquer valor. Um limite de 0.5 ou 1 exigirá que metade ou toda, respectivamente, a altura e a largura de um elemento estejam visíveis. threshold deve ser um número entre 0 e 1 .

 inView . threshold ( 0 ) ;
inView . threshold ( 0.5 ) ;
inView . threshold ( 1 ) ;

inView.test(<teste>)

Substitua os critérios de visibilidade padrão da visualização por uma função personalizada. Esta função receberá o elemento e o objeto de opções como seus únicos dois argumentos. Retorna true quando um elemento deve ser considerado visível e false caso contrário.

 inView . test ( ( el , options ) => {
    // ...
} ) ;

inView(<seletor>).check()

Verifique manualmente o status dos elementos selecionados pelo selector . Por padrão, todos os registros são verificados nos eventos scroll , resize e load da window .

 inView ( '.someSelector' ) . check ( ) ;

inView(<seletor>).emit(<evento>, <elemento>)

Emita event manualmente para qualquer elemento único.

 inView ( '.someSelector' ) . emit ( 'exit' , document . querySelectorAll ( '.someSelector' ) [ 0 ] ) ; 

---

Suporte ao navegador

in-view suporta todos os navegadores modernos e IE9+.

Como uma pequena advertência, o in-view utiliza MutationObserver para verificar a visibilidade dos elementos registrados após uma mutação do DOM. Se essa é a funcionalidade que você precisa no IE9-10, considere usar um polyfill.

---

Desempenho

Qualquer biblioteca que monitore eventos de rolagem corre o risco de degradar o desempenho da página. Para atenuar isso, atualmente, in-view registra apenas um único ouvinte de evento limitado (no máximo uma vez a cada 100 ms) em cada um dos eventos load , resize e scroll da window e os usa para executar uma verificação em cada registro.

Utilizando IntersectionObserver

Há uma API de navegador emergente, IntersectionObserver , que visa fornecer aos desenvolvedores uma maneira eficiente de verificar a visibilidade dos elementos DOM. Daqui para frente, o in-view terá como objetivo delegar ao IntersectionObserver quando for suportado, recorrendo à pesquisa apenas quando necessário.

---

Licença MIT