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

Question

Я пытаюсь определить, когда прокручиваю страницу вниз (без использования какой-либо библиотеки 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

Answer 1

Когда window.innerHeight + document.body.scrollTop Больше или равно document.body.offsetHeight тогда ты внизу

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

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

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

Answer 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
  }
});

Answer 3

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

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

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