Verifica se l'elemento può essere visto dall'utente su una pagina html

Question

C'è un modo per sapere se un elemento è visibile su una pagina html?

Ti piace questa:

Si può probabilmente farlo considerare le posizioni di scorrimento orizzontale/verticale, la larghezza/altezza della finestra del browser e la posizione/dimensione del elemento della pagina, ma Ho poca esperienza in jQuery quindi non so come farlo. E potrebbe esserci una semplice funzione che si può chiamare, non lo so.

Answer 1

È possibile utilizzare i selettori .is(':visible') per verificare se un elemento è attualmente visibile nel DOM.

Edit:

Tuttavia, come @BenM detto, questo non verifica se gli elementi della pagina sono in realtà fuori della tua portata scorrevole - un piccolo grande plug-in si potrebbe usare in quel caso sarebbe Viewport Selectors for jQuery.

Answer 2

Ecco un codice che uso per fare questo. È stato testato per funzionare alla grande.

function isVisible($obj) { 
    var top = $(window).scrollTop(); 
    var bottom = top + $(window).height(); 
    var objTop = $obj.offset().top; 
    var objBottom = objTop + $obj.height(); 

    if(objTop < bottom && objBottom > top) { 
     //some part of $obj is visible on the screen. 
     //does not consider left/right, only vertical. 
    } 
}