Бесконечный скролл — это техника, которая позволяет автоматически загружать новый контент при прокрутке страницы до определенной точки. Это улучшает пользовательский опыт и позволяет удерживать внимание посетителя на дольше. В этой статье мы рассмотрим, как реализовать бесконечный скролл на вашем сайте с помощью JavaScript и API.
1. Создание основы HTML и CSS
Для начала создайте базовую структуру HTML и CSS для вашего сайта. Это может быть простой список статей или изображений.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Бесконечный скролл</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="content">
<!-- Здесь будет контент -->
</div>
<script src="script.js"></script>
</body>
</html>
И простой файл стилей styles.css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#content {
width: 80%;
margin: 0 auto;
padding: 20px;
}
2. Создание функции загрузки контента
Теперь напишем функцию, которая будет загружать контент с помощью API. В этом примере мы воспользуемся открытым API для загрузки случайных изображений с сайта Unsplash.
// script.js
async function loadContent() {
const response = await fetch('https://api.unsplash.com/photos/random?count=10&client_id=YOUR_API_KEY');
const data = await response.json();
return data;
}
Не забудьте заменить YOUR_API_KEY на ваш ключ API Unsplash.
3. Рендеринг контента на странице
Следующим шагом будет добавление загруженного контента на страницу. Для этого создадим функцию renderContent().
// script.js
async function renderContent() {
const content = await loadContent();
const contentContainer = document.getElementById('content');
content.forEach(item => {
const img = document.createElement('img');
img.src = item.urls.small;
img.alt = item.description;
contentContainer.appendChild(img);
});
}
renderContent();
4. Реализация бесконечного скролла
Теперь, когда у нас есть функция для загрузки и отображения контента, можно реализовать бесконечный скролл. Для этого создадим функцию handleScroll() и добавим обработчик события scroll для окна.
// script.js
function handleScroll() {
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
const scrollPosition = window.scrollY;
if (documentHeight - (windowHeight + scrollPosition) <= 100) {
renderContent();
}
}
window.addEventListener('scroll', handleScroll);
Теперь, когда пользователь доскроллит до конца страницы, будет автоматически загружаться и отображаться новый контент.
🎉 Поздравляем! Вы успешно реализовали бесконечный скролл на вашем сайте. В дальнейшем вы можете адаптировать этот код под свои нужды и использовать различные API для загрузки контента.
Добавить комментарий