¿Cómo comprobar si el elemento es visible después de desplazarse?
Estoy cargando elementos vía AJAX. Algunos de ellos sólo son visibles si te desplazas hacia abajo en la página. ¿Hay alguna manera de saber si un elemento está ahora en la parte visible de la página?
Esto debería funcionar:
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
Función de utilidad simple Esto le permitirá llamar a una función de utilidad que acepte el elemento que está buscando y si desea que el elemento esté total o parcialmente a la vista.
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
Uso
var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);
if (isElementInView) {
console.log('in view');
} else {
console.log('out of view');
}
Esta respuesta en vainilla:
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;
// Only completely visible elements return true:
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
// Partially visible elements return true:
//isVisible = elemTop < window.innerHeight && elemBottom >= 0;
return isVisible;
}
Usando la API IntersectionObserver
(nativo en navegadores modernos)
Es fácil y eficiente determinar si un elemento es visible en la ventana gráfica o en cualquier contenedor desplazable mediante el uso de un observador .
Se elimina la necesidad de adjuntar un scrollevento y verificar manualmente la devolución de llamada del evento, lo cual es más eficiente:
// define an observer instance
var observer = new IntersectionObserver(onIntersection, {
root: null, // default is the viewport
threshold: .5 // percentage of target's visible area. Triggers "onIntersection"
})
// callback is called on intersection change
function onIntersection(entries, opts){
entries.forEach(entry =>
entry.target.classList.toggle('visible', entry.isIntersecting)
)
}
// Use the observer to observe an element
observer.observe( document.querySelector('.box') )
// To stop observing:
// observer.unobserve(entry.target)span{ position:fixed; top:0; left:0; }
.box{ width:100px; height:100px; background:red; margin:1000px; transition:.75s; }
.box.visible{ background:green; border-radius:50%; }<span>Scroll both Vertically & Horizontally...</span>
<div class='box'></div>Compatible con navegadores modernos, incluidos los navegadores móviles. No compatible con IE: ver la tabla de compatibilidad de navegadores
Actualización: use IntersectionObserver
El mejor método que he encontrado hasta ahora es el complemento jQuery . Funciona de maravilla.
Imita un evento personalizado de "aparición", que se activa cuando un elemento se desplaza a la vista o se vuelve visible para el usuario.
$('#foo').appear(function() { $(this).text('Hello world'); });Este complemento se puede utilizar para evitar solicitudes innecesarias de contenido oculto o fuera del área visible.
