javascript: detectar desplazamiento final

Question

Tengo una capa div con overflow establecido en scroll.

Cuando se desplaza hacia la parte inferior de div, quiero ejecutar una función.

Answer 1

La respuesta aceptada era fundamentalmente defectuosa, desde entonces ha sido eliminado. La respuesta correcta es:

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

Probado esto en Firefox, Chrome y Opera. Funciona.

Answer 2

No pude obtener ninguna de las respuestas anteriores para trabajar así que aquí hay una tercera opción que funciona para mí. (Esto se usa con jQuery)

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

Espero que esto ayude a alguien!

Answer 3

Esto funcionó para mí:

$(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(); 
    } 
}); 

Debe utilizar jQuery 1.6 o superior

Answer 4

he encontrado una alternativa que funciona.

Ninguna de estas respuestas funcionó para mí (actualmente está probando en FireFox 22.0), y después de mucha investigación encontré, lo que parece ser, una solución mucho más limpia y directa.

solución implementada:

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

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

Saludos

Answer 5

Aceptar He aquí una buena y adecuada solución

Tiene una llamada Div con un id="myDiv"

entonces la función 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

Tome un vistazo a este ejemplo: MDN Element.scrollHeight

le recomiendo que echa un vistazo a este ejemplo: stackoverflow.com/a/24815216... que implementa un manejo de la acción de desplazamiento a través del navegador.

Usted puede utilizar el siguiente fragmento:

//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

Desde innerHeight no funciona en algunas versiones antiguas de IE, clientHeight se puede utilizar:

$(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

creé una solución basada en evento en función de La respuesta de Bjorn Tipling:

(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)); 

Y usas la víspera nt así:

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

Por cierto: es necesario agregar este CSS para javascript para saber cuánto tiempo la página es

html, body { 
    height: 100%; 
} 

Demostración: http://plnkr.co/edit/CCokKfB16iWIMddtWjPC?p=preview