Jak mogę użyć JQuery, aby sprawdzić, czy div jest przewinięty do samego końca?

Question

Mam element div z przepełnieniem: przewiń.

Chcę wiedzieć, czy jest przewijany do samego końca. Jak korzystać z JQuery?

Ten jeden nie działa: How can I determine if a div is scrolled to the bottom?

Answer 1

Oto poprawne rozwiązanie (jsfiddle). Krótkie spojrzenie na kod:

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

Zobacz this aby uzyskać więcej informacji.

Answer 2

Można to zrobić przez

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

Zastosuj wymagane jQuery składni, oczywiście ...

Answer 3

Oto kod:

$("#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 zawiera właściwość scrollTopMax. Jeśli jesteś scrollTop === scrollTopMax, jesteś na samym dole elementu.

Answer 5

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

Jest to odmiana odpowiedzi @ samccone, która zawiera komentarz @ HenrikChristensen dotyczący pomiarów subpikseli.

Answer 6

Bez jQuery, dla onScroll imprezy

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

Answer 7

Jako że działa bez jQuery tak:

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

zrobić:

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

Answer 8

Dla mnie $el.outerHeight() daje złą wartość (ze względu na szerokość obramowania), podczas gdy $el.innerHeight() podaje poprawną, więc używam

function isAtBottom($el){ 

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