Реализация бесконечной прокрутки на JavaScript
Здравствуйте! В данной статье речь пойдет о том, как реализовать бесконечную прокрутку контента сайта, аналогично тому, как это реализовано в таких социальных сетях как ВКонтакте или Facebook. Зачем нужен бесконечная скроллинг на сайте я уже говорил в прошлой статье, поэтому в данной статье сосредоточусь по большей части на технической стороне вопроса.
Кратко о бесконечном скроллинге
Так, например, Facebook загружает новые статьи по мере того как проматываете страницу вниз. Это приводит к более быстрой загрузке всего сайта, так как пропадает необходимость загрузки всего контента сразу. И для достижения подобного, Facebook использует технику, называемую бесконечным скроллингом.
Вкратце, под бесконечным скроллингом понимают бесконечные страницы контента. Когда пользователь достигает конца документа, т.е. заканчивает просмотр или чтение статьи, это событие регистрируется и новая статья, с помощью Ajax, асинхронно загружается и затем отображается. Создается впечатление, что страница загружается бесконечно.
Реализация
Код, представленный далее, проверяет, достиг ли пользователь конца элемента при скроллинге и, если, да, то загружает новый контент:
<!doctype html>
<html>
<head>
<meta charset = "utf8" />
<title>Бесконечный скроллинг с JavaScript</title>
</head>
<body>
<div id="infinite-scroll">
<div>
<script>
for( let i = 0; i < 100; i++ )
document.write("<div>Случайный текст или еще, что то</div>");
</script>
</div>
</div>
<script>
window.addEventListener("scroll", function(){
var block = document.getElementById('infinite-scroll');
var counter = 1;
var contentHeight = block.offsetHeight; // 1) высота блока контента вместе с границами
var yOffset = window.pageYOffset; // 2) текущее положение скролбара
var window_height = window.innerHeight; // 3) высота внутренней области окна документа
var y = yOffset + window_height;
// если пользователь достиг конца
if(y >= contentHeight)
{
//загружаем новое содержимое в элемент
block.innerHTML = block.innerHTML + "<div>Случайный текст или еще, что то</div>";
}
});
</script>
</body>
</html>
По умолчанию, Facebook и Вконтакте всегда отображает некоторое количество постов, при первой загрузке страницы. А по мере того, как пользователь прокручивает страницу, внизу отображаются другие сообщения.
В приведенном выше примере кода мы добавляем некоторый демонстрационный текст в область содержимого, когда пользователь заканчивает чтение, т.е. достигает конца элемента #infinite-scroll. Здесь мы напрямую добавляем случайный текст, но на реальном сайте вы скорее всего будете получать новые данные, используя AJAX.
Таким образом, бесконечная прокрутка представляет собой интересный способ организации представления контента сайта.
-
Создано 15.01.2019 09:00:42
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.