Detección avanzada de estado visible-visibilityEvents. js

Tiempo de ejecución: 30 minutos. Empezar

Autor: jmalarcon
Views Total: 51
Sitio oficial: Ir a la web
Actualizado: April 13, 2019
Licencia: MIT

Vista prévia

Detección avanzada de estado visible-visibilityEvents. js

Descripción

visibilityEvents. js es una biblioteca de detección avanzada ' is in viewport ' para determinar si una parte o todo el elemento está dentro de la ventanilla.

Funcionamiento

Instalación.

# NPM
$ npm install visibilityevents --save

Importe el visibilityEvents. js en el documento.

<script src="visibilityEvents.js"></script>

Desencadenar un evento cuando el elemento está completamente visible.

var myEl = document.getElementById("element-to-track");
myEl.addEventListener('show', function(){

 // do something
});

Desencadenar un evento cuando una parte del elemento es visible.

var myEl = document.getElementById("element-to-track");
myEl.addEventListener('showpart', function(ev){

 console.log("Event: %s for %s. Visibility state: %s", ev.type, ev.target.id, ev.detail.visible);
});

Desencadenar un evento cuando el elemento está completamente oculto.

var myEl = document.getElementById("element-to-track");
myEl.addEventListener('hide', function(){

 // do something
});

Desencadenar un evento cuando se oculta una parte del elemento.

var myEl = document.getElementById("element-to-track");
myEl.addEventListener('hidepart', function(ev){

 console.log("Event: %s for %s. Visibility state: %s", ev.type, ev.target.id, ev.detail.visible);
});

Te puede interesar: