javascript: detect scroll end

Question

Ho uno strato div con overflow impostato su scroll.

Quando si scorre verso la parte inferiore del div, voglio eseguire una funzione.

Answer 1

La risposta accettata era fondamentalmente errata, da allora è stato cancellato. La risposta corretta è:

function scrolled(e) { 
    if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) { 
    scrolledToBottom(e); 
    } 
} 

Testato in Firefox, Chrome e Opera. Funziona.

Answer 2

Non ho potuto ottenere nessuna delle risposte precedenti per funzionare quindi ecco una terza opzione che funziona per me! (Questo è usato con jQuery)

if (($(window).innerHeight() + $(window).scrollTop()) >= $("body").height()) { 
    //do stuff 
} 

Spero che questo aiuti chiunque!

Answer 3

questo ha funzionato per me:

$(window).scroll(function() { 
    buffer = 40 // # of pixels from bottom of scroll to fire your function. Can be 0 
    if ($(".myDiv").prop('scrollHeight') - $(".myDiv").scrollTop() <= $(".myDiv").height() + buffer) { 
    doThing(); 
    } 
}); 

Deve usare jQuery 1.6 o superiore

Answer 4

ho trovato un'alternativa che funziona.

Nessuna di queste risposte ha funzionato per me (attualmente in prova in FireFox 22.0) e, dopo molte ricerche, ho trovato, a quanto pare, una soluzione molto più pulita e immediata.

soluzione implementata:

function IsScrollbarAtBottom() { 
    var documentHeight = $(document).height(); 
    var scrollDifference = $(window).height() + $(window).scrollTop(); 
    return (documentHeight == scrollDifference); 
} 

risorse: http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html

saluti

Answer 5

OK Ecco una buona e corretta soluzione

Hai una chiamata Div con una id="myDiv"

quindi la funzione g OES.

function GetScrollerEndPoint() 
{ 
    var scrollHeight = $("#myDiv").prop('scrollHeight'); 
    var divHeight = $("#myDiv").height(); 
    var scrollerEndPoint = scrollHeight - divHeight; 

    var divScrollerTop = $("#myDiv").scrollTop(); 
    if(divScrollerTop === scrollerEndPoint) 
    { 
     //Your Code 
     //The Div scroller has reached the bottom 
    } 
} 

Answer 6

Date un'occhiata a questo esempio: MDN Element.scrollHeight

vi consiglio di controllare questo esempio: stackoverflow.com/a/24815216... che implementa una gestione per l'azione di scorrimento cross-browser.

È possibile utilizzare il seguente frammento:

//attaches the "scroll" event 
$(window).scroll(function (e) { 
    var target = e.currentTarget, 
     scrollTop = target.scrollTop || window.pageYOffset, 
     scrollHeight = target.scrollHeight || document.body.scrollHeight; 
    if (scrollHeight - scrollTop === $(target).innerHeight()) { 
     console.log("► End of scroll"); 
    } 
}); 

Answer 7

Dal innerHeight non funziona in alcune vecchie versioni di IE, clientHeight può essere utilizzato:

$(window).scroll(function (e){ 
    var body = document.body;  
    //alert (body.clientHeight); 
    var scrollTop = this.pageYOffset || body.scrollTop; 
    if (body.scrollHeight - scrollTop === parseFloat(body.clientHeight)) { 
     loadMoreNews(); 
    } 
}); 

Answer 8

ho creato una soluzione basata evento sulla base di Bjorn Tipling's answer:

(function(doc){ 
    'use strict'; 

    window.onscroll = function (event) { 
     if (isEndOfElement(doc.body)){ 
      sendNewEvent('end-of-page-reached'); 
     } 
    }; 

    function isEndOfElement(element){ 
     //visible height + pixel scrolled = total height 
     return element.offsetHeight + element.scrollTop >= element.scrollHeight; 
    } 

    function sendNewEvent(eventName){ 
     var event = doc.createEvent('Event'); 
     event.initEvent(eventName, true, true); 
     doc.dispatchEvent(event); 
    } 
}(document)); 

E tu usi la vigilia nt in questo modo:

document.addEventListener('end-of-page-reached', function(){ 
    console.log('you reached the end of the page'); 
}); 

BTW: è necessario aggiungere questo CSS per javascript sapere quanto tempo la pagina è

html, body { 
    height: 100%; 
} 

Demo: http://plnkr.co/edit/CCokKfB16iWIMddtWjPC?p=preview