Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг Управление проектами
25 Мар 2024
3 мин
1248

Как сделать бесконечный скролл на сайте

Узнайте, как создать бесконечный скролл на вашем сайте, улучшить пользовательский опыт и удерживать внимание посетителей с помощью JavaScript и API.

Бесконечный скролл — это техника, которая позволяет автоматически загружать новый контент при прокрутке страницы до определенной точки. Это улучшает пользовательский опыт и позволяет удерживать внимание посетителя на дольше. В этой статье мы рассмотрим, как реализовать бесконечный скролл на вашем сайте с помощью 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&amp;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 =&gt; {
        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) &lt;= 100) {
        renderContent();
    }
}

window.addEventListener('scroll', handleScroll);

Теперь, когда пользователь доскроллит до конца страницы, будет автоматически загружаться и отображаться новый контент.

🎉 Поздравляем! Вы успешно реализовали бесконечный скролл на вашем сайте. В дальнейшем вы можете адаптировать этот код под свои нужды и использовать различные API для загрузки контента.

Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей

Добавить комментарий