Как отследить что user проскролил страницу в самый низ?

Question

[driver458]

При прокрутке вниз мне нужно подгрузить новые данные (как VK например).
Как это лучше сделать?

Интересует решение на чистом JS.

Answer 1

[driver458]

Моё решение под React
Источник

componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.handleScroll);
}

handleScroll = (e) => {
  if (window.innerHeight + window.scrollY > document.body.clientHeight - 100) {
    console.log('I need to load some more content here…');
  }
}

Answer 2

[xiiicool]

как вариант выполнять подгрузку если элемент виден

Определить видно ли элемент на экране или нет, можно проанализировав положение верхней границы и положение скроллбара окна

При изменение положения скроллбара окна возникает событие $(window).scroll()

Определить впервые показывается элемент или нет, можно при помощи какого-нибудь глобального флага

jQuery(document).ready(function($) {
$(window).scroll(function() {
var cont = $('.content');
if (!cont.hasClass('visible')) {
var wh = $(this).height();
var topOffset = cont.offset().top - $(this).scrollTop();
var visible = (topOffset <= wh) && (topOffset + cont.height() > 0);
if (visible) {
cont.addClass('visible');
console.log('Visible!!!');
}
}
});
});

.padding {
height: 300px;
}

.content {
background-color: red;
}

 
Content
 

Comments

[driver458]

я не использую jquery

[Ярослав Иванов]

driver458, Тебе алгоритм дали, переписывай под js)

[driver458]

Ярослав Иванов, ну алгоритм тут так себе

[Николай Шабалин]

driver458, что Вам мешает узнать высоту всей страницы? Например, document.body.scrollHeight, способов несколько. Гуглите.
дальше слушайте событие скролл и узнавайте положение скролла. Как Вам такой алгоритм?