Я делаю систему разбивки на страницы (вроде Facebook), где контент загружается, когда пользователь прокручивает страницу до конца. Я полагаю, что лучший способ сделать это - найти пользователя внизу страницы и выполнить запрос ajax, чтобы загрузить больше сообщений.
Единственная проблема в том, что я не знаю, как проверить, прокрутил ли пользователь внизу страницы с помощью jQuery. Любые идеи?
Мне нужно найти способ проверить, когда пользователь прокрутил страницу вниз с помощью jQuery.
javascript
jquery
scroll
pagination
Джонни
источник
источник
Ответы:
Используйте
.scroll()
событиеwindow
, как это:Вы можете проверить это здесь , это берет верхнюю прокрутку окна, поэтому, насколько оно прокручивается вниз, добавляет высоту видимого окна и проверяет, равна ли это высоте всего содержимого (
document
). Если вы хотите , чтобы вместо того, чтобы проверить , если пользователь находится рядом с нижней, было бы выглядеть примерно так:Вы можете протестировать эту версию здесь , просто отрегулируйте ее
100
для любого пикселя снизу, на котором вы хотите запустить.источник
console.log()
вместо предупреждения сделать это, иногда повторяется команда.Ответ Ника Крейвера работает отлично, избавьте от проблемы, которая
$(document).height()
зависит от браузера.Чтобы он работал во всех браузерах, используйте эту функцию от Джеймса Падолси :
вместо
$(document).height()
, так что окончательный код:источник
min
вместоmax
, особенно если в любом случае есть запас, чтобы избежать случайного предотвращения перехода пользователя к тому, что, по вашему мнению, является нижней частью страницы.Я не совсем уверен, почему это еще не было опубликовано, но согласно документации из MDN , самый простой способ - использовать нативные свойства javascript:
Возвращает true, когда вы находитесь в нижней части любого прокручиваемого элемента. Так что просто с помощью JavaScript:
scrollHeight
имеют широкую поддержку в браузерах, то есть от 8, если быть более точным,clientHeight
иscrollTop
оба поддерживаются всеми. Даже то есть 6. Это должно быть кросс-браузерным.источник
var isAtBottom = ( logField.scrollHeight - logField.scrollTop <= logField.clientHeight + 50 );
. Это полезно для автоматической прокрутки поля, только если оно уже внизу (поэтому пользователь может вручную просмотреть определенную часть журнала в реальном времени, не теряя своего места и т. Д.).200.181819304947
и200
). Я добавил,Math.floor()
чтобы помочь справиться с этим, но я не знаю, насколько это будет надежно.Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= 3.0
(замените 3.0 на любой пиксельный допуск, который вы считаете подходящим для ваших обстоятельств). Это путь, потому что (A)clientHeight
,scrollTop
иclientHeight
все они округлены, что может привести к ошибке 3px, если все выровнять, (B) 3 пикселя вряд ли видны пользователю, поэтому пользователь может подумать, что что-то не так с вашим сайтом когда они «думают», они находятся внизу страницы, хотя на самом деле это не так, и (C) некоторые устройства (особенно устройства без мыши) могут иметь странное поведение при прокрутке.Для тех, кто использует решение Ника и получает повторные оповещения / срабатывание событий, вы можете добавить строку кода над примером оповещения:
Это означает, что код будет срабатывать только в первый раз, когда вы окажетесь в пределах 100 пикселей от нижней части документа. Это не повторится, если вы прокрутите назад вверх, а затем назад вниз, что может или не может быть полезным в зависимости от того, для чего вы используете код Ника.
источник
В дополнение к превосходному принятому ответу Ника Крейвера, вы можете регулировать событие прокрутки, чтобы оно не запускалось так часто, что повышает производительность браузера :
источник
Ответ Ника Крейвера должен быть слегка изменен для работы на iOS 6 Safari Mobile и должен быть:
Изменение $ (окно) .height () , чтобы window.innerHeight должно быть сделано , потому что , когда адресная строка скрыта дополнительные 60px добавлены к высоте окна , но с использованием
$(window).height()
вовсе не отражают эти изменения, в то время как с помощьюwindow.innerHeight
делает.Примечание .
window.innerHeight
Свойство также включает в себя высоту горизонтальной полосы прокрутки (если она отображается), в отличие от$(window).height()
которой не будет учитываться высота горизонтальной полосы прокрутки. Это не проблема в Mobile Safari, но может вызвать непредвиденное поведение в других браузерах или будущих версиях Mobile Safari. Изменение==
к>=
может исправить это для большинства распространенных случаев использования.Подробнее о
window.innerHeight
недвижимости здесьисточник
Вот довольно простой подход
const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight
пример
Где
elm
элемент извлекается из тdocument.getElementById
.источник
Вот фрагмент кода, который поможет вам отладить ваш код, я проверил приведенные выше ответы и обнаружил, что они содержат ошибки. Я протестировал следующее на Chrome, IE, Firefox, IPad (Safari). У меня нет других установленных для тестирования ...
Возможно, есть более простое решение, но я остановился на том моменте, когда ЭТО РАБОТАЛО
Если у вас все еще есть проблемы с каким-то мошенническим браузером, вот код, который поможет вам отладить:
Я надеюсь, что это сэкономит кому-то время.
источник
var docElement = document.documentElement; var winElement = window
winElement.pageYOffset
вас также можно использоватьwinElement.scrollY
.Пожалуйста, проверьте этот ответ
Вы можете сделать,
footerHeight - document.body.offsetHeight
чтобы увидеть, если вы находитесь рядом с нижним колонтитулом или достигли нижнего колонтитулаисточник
Он рассчитывает расстояние полосы прокрутки до нижней части элемента. Равен 0, если полоса прокрутки достигла дна.
источник
Это мои два цента:
источник
$(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight
=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight
Чистый JS с кросс-браузерным и дебасингом (довольно хорошая производительность )
Демо: http://jsbin.com/geherovena/edit?js,output
PS:
Debouncer
,getScrollXY
,getDocHeight
не написано мнойЯ просто покажу, как это работает, И как я буду делать
источник
Мое решение в простой js:
источник
Попробуйте это для условия соответствия, если прокрутить до нижнего конца
источник
Ник отвечает отлично, но у вас будут функции, которые повторяются во время прокрутки или не будут работать вообще, если окно пользователя увеличено. Я придумал простое решение по математике вокруг первой высоты, и оно работает так, как предполагалось.
источник
Вы можете попробовать следующий код,
источник
Это дает точные результаты при проверке прокручиваемого элемента (т.е. нет
window
):offsetHeight
должен давать фактическую видимую высоту элемента (включая отступы, поля и полосы прокрутки), аscrollHeight
также всю высоту элемента, включая невидимые (переполненные) области.jQuery
Это.outerHeight()
должно дать аналогичный результат для JS.offsetHeight
- документация в MDN дляoffsetHeight
неясно о его кросс-браузерной поддержке. Чтобы охватить больше вариантов, это более полно:источник
Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeight
в случае, если scrollTop является десятичным числом, без которого он не будет работатьMath.floor()
Вместо прослушивания события прокрутки, использование Intersection Observer является недорогим для проверки, был ли последний элемент видимым в области просмотра (это означает, что пользователь был прокручен вниз). Он также поддерживается для IE7 с полифилом .
источник
.observe(...)
прослушиватель событий, например, когда пользователь наводит / трогает ваш контейнер прокрутки, чтобы он не запускался немедленно.Все эти решения не работают для меня в Firefox и Chrome, поэтому я использую пользовательские функции от Miles O'Keefe и meder omuraliev например:
источник
Вот мои два цента, поскольку принятый ответ не работал для меня.
источник
Позвольте мне показать подход без JQuery. Простая функция JS:
Краткий пример, как его использовать:
источник
Я использовал @ddanone answerear и добавил Ajax call.
}
источник
Чтобы остановить повторное оповещение об ответе Ника
источник
Google Chrome дает полную высоту страницы, если вы звоните
$(window).height()
Вместо этого используйте
window.innerHeight
для получения высоты вашего окна. Необходимая проверка должна быть:источник
Очевидно, что для меня работало «тело», а не «окно», как это:
для кросс-браузерной совместимости используйте:
а затем вместо $ (document) .height () вызвать функцию getheight ()
для почти нижнего использования:
источник