Как я могу использовать JQuery для проверки прокрутки div до конца?

Ответ 1

Вот правильное решение (jsfiddle). Краткий обзор кода:

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

Подробнее см. .

Ответ 2

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

Это вариация ответа @samccone, в котором содержится комментарий @HenrikChristensen относительно субпиксельных измерений.

Ответ 3

Вы можете сделать это с помощью

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

Применить требуемый синтаксис jQuery, конечно...

Ответ 4

Начиная с 2012 года Firefox содержит свойство scrollTopMax, Если scrollTop === scrollTopMax, вы находитесь в нижней части элемента.

Ответ 5

Вот код:

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

Ответ 6

Без jquery, для события onScroll

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

Ответ 7

Так как он работает без jQuery:

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

Я делаю:

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

Ответ 8

Для меня $el.outerHeight() дает неправильное значение (из-за ширины границы), тогда как $el.innerHeight() дает правильный, поэтому я использую

function isAtBottom($el){

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