Определение при прокрутке вниз страницы с помощью Javascript

Я пытаюсь определить, когда я прокручиваю нижнюю часть страницы (без использования какой-либо JS-библиотеки), но до сих пор я немного смущен, какой из них следует использовать. Самый многообещающий, который я видел, это window.scrollY, но даже когда он прокручивается в нижней части страницы, он никогда не соответствует значению window.innerHeight. Какой лучший способ сделать это?

window.innerWidth
window.innerHeight

window.outerWidth
window.outerHeight

window.scrollX
window.scrollY

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollTop
document.body.scrollLeft

document.body.offsetTop
document.body.offsetLeft
document.body.offsetWidth
document.body.offsetHeight

Ответ 1

когда window.innerHeight + document.body.scrollTop больше или равно document.body.offsetHeight, тогда вы находитесь внизу

но поскольку IE имеет проблемы с этими свойствами, вам нужно использовать альтернативные свойства, например

document.documentElement.scrollTop для прокрутки и document.documentElement.clientHeight для высоты окна

полный код: http://jsbin.com/egegu3/6/edit

Ответ 2

Будучи ленивым человеком в глубине души, я бы поставил элемент в самую нижнюю часть DIV и применил элемент " Плагин jQuery на нем. (Отказ от ответственности: у меня нет собственного опыта, но он выглядит хорошо.)

Небольшое изменение в примере из записи в блоге:

$('#bottomDIV').bind('inview', function (event, visible) {
  if (visible == true) {
    // element is now visible in the viewport
    highlightButtons(); // or whatever you want to do in the context
  }
});

Ответ 3

Это отлично работает:

 window.onscroll = function()
 {
    var scrollHeight, totalHeight;
    scrollHeight = document.body.scrollHeight;
    totalHeight = window.scrollY + window.innerHeight;

    if(totalHeight >= scrollHeight)
    {
        console.log("at the bottom");
    }
}