¿Cómo puedo usar JQuery para verificar si un div se desplaza completamente hacia abajo?

Question

Tengo un div con desbordamiento: desplazamiento.

Quiero saber si actualmente está desplazado hacia abajo. ¿Cómo, usando JQuery?

Ésta no funciona: How can I determine if a div is scrolled to the bottom?

Answer 1

Aquí está la solución correcta (jsfiddle). Un breve vistazo al código:

$(document).ready(function() { 
    $('div').bind('scroll', chk_scroll); 
}); 

function chk_scroll(e) { 
    var elem = $(e.currentTarget); 
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) { 
     console.log("bottom"); 
    } 
} 

Ver this para obtener más información.

Answer 2

Usted puede hacer que al

(scrollHeight - scrollTop()) == outerHeight() 

Aplicar requiere la sintaxis de jQuery, por supuesto ...

Answer 3

Aquí está el código:

$("#div_Id").scroll(function (e) { 
    e.preventDefault(); 
    var elem = $(this);    
    if (elem.scrollTop() > 0 && 
      (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) { 
     alert("At the bottom"); 
    } 
}); 

Answer 4

Since 2012 Firefox contiene la propiedad scrollTopMax. Si scrollTop === scrollTopMax está en la parte inferior del elemento.

Answer 5

function isScrolledToBottom(el) { 
    var $el = $(el); 
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1; 
} 

Esta es una variación de la respuesta de @samccone que incorpora el comentario de @ HenrikChristensen con respecto a las mediciones de subpíxeles.

Answer 6

Sin jQuery, para el evento OnScroll

var scrollDiv = event.srcElement.body 
window.innerHeight + scrollDiv.scrollTop == scrollDiv.scrollHeight 

Answer 7

ya que funciona sin jQuery así:

var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight; 

hago:

var node = $('#mydiv')[0]; // gets the html element 
if(node) { 
    var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight; 
} 

Answer 8

Para mí $el.outerHeight() da el valor incorrecto (debido al ancho del borde), mientras que $el.innerHeight() da la correcta, entonces uso

function isAtBottom($el){ 

    return ($el[0].scrollHeight - $el.scrollTop()) == $el.innerHeight(); 
}