jQuery: come determinare se un div è scorretto verso il basso

Question

Ho un div con altezza definita e overflow:scroll;. Il suo contenuto è troppo lungo per cui appaiono le barre di scorrimento.

Ora per la parte di ichy. Alcuni dei suoi HTML interni appaiono stranamente tutto il tempo (per essere precisi, il piè di pagina di una tabella generato dal plugin tableFilter). Mi piacerebbe far scomparire questo piè di pagina quando non è necessario (in realtà appare fuori dal bordo contenente <div>). Ho deciso di farlo sparire ma impostando il suo z-index su -1000. Ma voglio farlo apparire quando il <div> contenente è completamente scrollato verso il basso.

Come posso sapere che l'utente ha eseguito lo scorrimento verso il basso?

---

Utilizzando l'aiuto di risposte qui di seguito, ho usato l'attributo scrollTop ma la differenza tra scrollTop e innerHeight è la dimensione della barra di scorrimento più alcuni delta non identificato. Una barra di scorrimento è alta 16 pixel nella maggior parte dei browser in Windows, ma ottengo una differenza di 17 in Firefox e qualcosa come 20 in IE, dove i bordi dei miei contenuti <div> sembrano essere ingranditi.

Un modo (in realtà due modi ...) per calcolare la dimensione della barra di scorrimento è stato dato there.

Answer 1

È necessario confrontare l'altezza div con la posizione scrollTop e l'altezza dell'elemento.

$(div).scroll(function(){ 
    if(isScrollBottom()){ 
    //scroll is at the bottom 
    //do something... 
    } 
}); 

function isScrollBottom() { 
    var elementHeight = $(element).height(); 
    var scrollPosition = $(div).height() + $(div).scrollTop(); 
    return (elementHeight == scrollPosition); 
} 

Answer 2

No jQuery necessario per ottenere queste informazioni:

element.scrollTop; 

In un evento di scorrimento del DIV, utilizzare queste informazioni per controllare contro l'altezza dell'elemento, se corrisponde (o è vicino alla corrispondenza) fare tutto quello che vuoi.

Answer 3

È possibile sapere se il div viene fatta scorrere verso il basso semplicemente facendo questo:

if (div.scrollTop + div.clientHeight == div.scrollHeight){ 
//... 
} 

Funziona su Firefox, Chrome e IE8

Answer 4

function elementInViewport(el) { 
    var listcontent= $(".listContainer")[0].getBoundingClientRect(); 
    var rect = $(el)[0].getBoundingClientRect(); 
    return [(rect.top >= 0 && rect.left >= 0 && rect.bottom <= listcontent.bottom), (rect.bottom - listcontent.bottom)] 
} 

Answer 5

Hai solo bisogno di utilizzare lo scrollHeight proprietà del div anziché dell'altezza. L'isScrollBottom function() che Shaun Humphries scritto in precedenza può essere messo in questo modo

function isScrollBottom() { 
var totalHeight = $("divSelector")[0].scrollHeight; 
var scrollPosition = $("divSelector").height() + $("divSelector").scrollTop(); 
return (totalHeight == scrollPosition); 
} 

Answer 6

credo, semplicemente

$(this).scrollTop()

farebbe il trucco.

Answer 7

Questo non è limitato a div:

toallyScrolled = element.scrollHeight - element.scrollTop === element.clientHeight; 

da MDN Element.scrollHeight. C'è anche una bella demo su quella pagina.