driver458
@driver458

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

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

Интересует решение на чистом JS.
  • Вопрос задан
  • 790 просмотров
Решения вопроса 1
driver458
@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…');
  }
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@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
 
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы