Cómo comprobar si un elemento está en la vista del usuario con jquery

Question

Tengo un muy grande div arrastrable en mi ventana. Este div tiene una ventana más pequeña.

<div id="draggable-area" style="width:500px;height:500px;overflow:hidden"> 
<div id="draggable" style="width:5000px;height:5000px"> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     .... 
    </ul> 
    </div> 
</div> 

¿Cómo puedo saber si el elemento li es visible en la ventana gráfica de usuario (Me refiero a realmente visible, no en el área de desbordamiento)?

Answer 1

echar un vistazo a this plugin

Se dan de que la opción de hacer los siguientes selectores

$(":in-viewport") 
$(":below-the-fold") 
$(":above-the-top") 
$(":left-of-screen") 
$(":right-of-screen") 

Answer 2

Para comprobar si un elemento se encuentra en la veiwport actual:

function elementInViewport(el) { 
    var top = el.offsetTop; 
    var left = el.offsetLeft; 
    var width = el.offsetWidth; 
    var height = el.offsetHeight; 

    while(el.offsetParent) { 
    el = el.offsetParent; 
    top += el.offsetTop; 
    left += el.offsetLeft; 
    } 

    return (
    top >= window.pageYOffset && 
    left >= window.pageXOffset && 
    (top + height) <= (window.pageYOffset + window.innerHeight) && 
    (left + width) <= (window.pageXOffset + window.innerWidth) 
); 
} 

(Source)

Para un más robusto método, me gustaría recomendar Viewport Selectors, que le permiten acaba de hacer:

$("#elem:in-viewport") 

Answer 3

Mi solución es utilizar el ejemplo de código dado, y se le mostrará una idea general de cómo determinar si el elemento li es visible. Consulte el jsFiddle que contiene el código de su pregunta.

El método jQuery .offset() nos permite recuperar la posición actual de un elemento relativo al documento. Si hace clic en un elemento li dentro del elemento que se puede arrastrar, su desplazamiento desde la parte superior estará entre 0 y 500 y el desplazamiento desde la izquierda debería estar entre 0 y 500. Si llama a la función de desplazamiento de un elemento que no está visible actualmente, el desplazamiento será inferior a 0 o superior a 500 desde el desplazamiento superior o izquierdo.

Si no es una tarea desalentadora, siempre me gusta codificar lo que necesito de 'scrath', me da más flexibilidad cuando tengo que modificar o depurar, por lo que recomendaría utilizar la función offset de jQuery en lugar de usar un complemento . Si lo que intentas lograr es bastante simple, usar tu propia función te dará una biblioteca menos para cargar.

Answer 4

https://github.com/sakabako/scrollMonitor

var scrollMonitor = require("./scrollMonitor"); // if you're not using require, you can use the scrollMonitor global. 
var myElement = document.getElementById("itemToWatch"); 

var elementWatcher = scrollMonitor.create(myElement); 

elementWatcher.enterViewport(function() { 
    console.log('I have entered the viewport'); 
}); 
elementWatcher.exitViewport(function() { 
    console.log('I have left the viewport'); 
}); 

elementWatcher.isInViewport - true if any part of the element is visible, false if not. 
elementWatcher.isFullyInViewport - true if the entire element is visible [1]. 
elementWatcher.isAboveViewport - true if any part of the element is above the viewport. 
elementWatcher.isBelowViewport - true if any part of the element is below the viewport. 

Answer 5

I m usando (comprueba si un elemento es al menos parcialmente en la vista) siguiente código:

var winSize; 

function getWindowSize() { 
      var winW,WinH = 0; 
      if (document.body && document.body.offsetWidth) { 
       winW = document.body.offsetWidth; 
       winH = document.body.offsetHeight; 
      } 
      if (document.compatMode == 'CSS1Compat' && 
       document.documentElement && 
       document.documentElement.offsetWidth) { 
       winW = document.documentElement.offsetWidth; 
       winH = document.documentElement.offsetHeight; 
      } 
      if (window.innerWidth && window.innerHeight) { 
       winW = window.innerWidth; 
       winH = window.innerHeight; 
      } 
      return {w:winW, h:winH}; 
     } 

winSize = getWindowSize();  

function inView(element) { 
       var box = element.getBoundingClientRect(); 
       if ((box.bottom < 0) || (box.top > winSize.h)){ 
        return false; 
       } 
       return true; 
      }