Как определить, когда пользователь прокручивает элемент Div до конца с помощью jQuery

Вы создали элемент div с динамическим содержимым, который имеет " авто» настройка переполнения. Чтобы улучшить взаимодействие с пользователем, вы хотите загружать дополнительный контент, когда пользователь прокручивает этот элемент div до нижней части. Однако вы не знаете, как обнаружить это конкретное событие.

Ключ к этому обнаружению лежит в использовании определенных свойств и методов jQuery:

• $().scrollTop(): Указывает количество пикселей, на которое был прокручен элемент.
• $().innerHeight(): представляет внутреннюю высоту элемента
• DOMElement.scrollHeight: возвращает высоту содержимого элемента

Чтобы определить, когда пользователь достиг нижней части элемента div, вы можете сравнить сумму первых двух свойств с третьим свойством. Когда эти значения совпадают, достигается конец элемента div.

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop()   $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

В этом решении используется метод on(), который предпочтителен для обработки событий в jQuery версии 1.7.

Дополнительные примечания:

• Прослушиватель событий прикреплен к элементу div с идентификатором #flux, который представляет элемент, который вы хотите отслеживать.
• Функция alert() используется в демонстрационных целях. Здесь вы можете включить свою собственную логику для загрузки дополнительного контента.
• Живой пример можно найти по адресу http://jsfiddle.net/doktormolle/w7X9N/.