Оповещение с помощью jQuery при прокрутите до конца страницы
-
05-10-2019 - |
Вопрос
Есть ли способ узнать конец страницы с помощью jQuery, чтобы отобразить простое сообщение, говоря, что вы достигли конца страницы.
Решение
Как сказать, когда вы внизу страницы:
if ( document.documentElement.clientHeight +
$(document).scrollTop() >= document.body.offsetHeight )
{
// Display alert or whatever you want to do when you're
// at the bottom of the page.
alert("You're at the bottom of the page.");
}
Конечно, вы хотите выстрелить выше, когда пользователь прокручивается:
$(window).scroll(function() {
if ( document.documentElement.clientHeight +
$(document).scrollTop() >= document.body.offsetHeight )
{
// Display alert or whatever you want to do when you're
// at the bottom of the page.
alert("You're at the bottom of the page.");
}
});
Вот пример jsfiddle Что исчезает в «Вы закончите! Прокрутите до начала страницы», когда пользователь прокручивается до нижней части страницы.
Использованная литература:
Другие советы
Это будет работать, и я проверил его в IE 7,8,9, FF 3.6, Chrome 6 и Opera 10.6
$(window).scroll(function()
{
if (document.body.scrollHeight - $(this).scrollTop() <= $(this).height())
{
alert('end');
}
});
Если вышеуказанные решения не работают, пожалуйста, проверьте, установите ли вы тип документа справа:
<!DOCTYPE HTML>
Потратил у меня час, чтобы узнать :)
Чтобы избежать дублирования console.log('end of page')
, Вам нужно создать сертификат, как это:
var doc = $(document), w = $(window), timer;
doc.on('scroll', function(){
if(doc.scrollTop() + w.height() >= doc.height()){
if(typeof timer !== 'undefined') clearTimeout(timer);
timer = setTimeout(function(){
console.log('end of page');
}, 50);
}
});
Это может потребоваться подстройка для учета браузеров, но что-то вроде этого должно сделать:
$(document).scroll(function()
{
var $body = $('body');
if (($body.get(0).scrollHeight - $body.scrollTop) == $body.height())
{
// display your message
}
});
Примечание для отладки: я получал оповещение о возвращении на вершину страницы (?), Используя jquery-1.10.2.js. Загруженный jQuery-1.6.4.min.js и все хорошо.