Событие, которое наступает, когда до конца прокрутки страницы остается 300px?

Question

[Shimpanze]

Здравствуйте!

Подскажите, пожалуйста, как (на чистом JS) выполнять функцию всякий раз, когда до конца скроллинга страницы остается 300px? Это нужно для подгрузки определенной информации на страницу.

window.addEventListener( "scroll", function() {
  if () {
    alert("Осталось 300px!");
  }
}, false);

Спасибо!

Answer 1

[Владимир]

https://developer.mozilla.org/en-US/docs/Web/API/E...
https://developer.mozilla.org/en-US/docs/Web/API/S...
и document.body.clientHeight
https://learn.javascript.ru/onscroll
Сами в кучку свяжете ?
Пример с полностью проскроленой страница хабра

Comments

[Shimpanze]

Владимир, я написал условие. Спасибо. Но сейчас другая проблема, как заставить его срабатывать один раз (а не каждый последующий пиксель прокрутки) при достижении данной точки?

window.onscroll = function() {
  if ((document.documentElement.scrollHeight - (document.documentElement.scrollTop + document.documentElement.clientHeight)) <= document.documentElement.clientHeight) {
    console.log("До конца прокрутки осталось одно видимое окно");
  }
}

[Владимир]

Shimpanze, Зависит от, если это бесконечная прокрутка, то можно удалять событие на время подгрузки данных и после подгрузки опять садить

Answer 2

[ParaBellum577]

Как вариант проконсолить window.pageYOffset в самом низу страницы, отнять 300. Итого если window.pageYOffset = 1000, то

window.addEventListener( "scroll", function() {
 if (window.pageYOffset === 700) {
alert("Осталось 300px!");
}, false);

Comments

[Владимир]

Откуда 1000?

[ParaBellum577]

Владимир, я же как пример написал. Оттолкнулся от 1000. У него будут свои цифры.