Infinite scroll є популярною технікою, яка використовується на веб-сайтах для підвищення взаємодії користувачів, постійно завантаження нового контенту, як користувач прокручує сторінку. Цей підхід зберігає відвідувачів, які займалися довше і забезпечує безшовний досвід перегляду. Реалізація нескінченного прокрутки з JavaScript є прямим і може бути налаштований для задоволення різних потреб веб-сайтів, від соціальних медіа живих до електронних комерції продуктів список продуктів. У цій статті ми розглянемо чому, як і кращі практики нескінченного прокрутки, завершитися розширеними прикладами коду і оцінка продуктивності.

Чому використовувати нефіцитний скрол?

Нескінченний прокруток пропонує кілька переваг, які безпосередньо впливають на взаємодію користувача та продуктивність сайту:

  • Використовує необхідність у патології: Виключивши завантаження сторінок та ручні натискання, перегляд стає більш гладким і більш інтуїтивно зрозумілим. Користувачі можуть вивчити вміст без перебоїв.
  • Виявлення контенту: Як нові елементи автоматично навантажуються, відвідувачі, швидше за все, щоб побачити додаткові статті, продукти або повідомлення, які можуть інакше пропустити.
  • Імпровує метрики взаємодії користувачів: Час на сторінці, сторінки за сеансом, а глибина прокрутки часто збільшується, оскільки природний потік перегляду підтримується.
  • Провідує сучасний, динамічний досвід користувача: Багато популярних платформ, таких як Twitter, Pinterest, і Instagram використовують нескінченний прокруток для створення програми-подібного відчуття на сайті.

Однак нескінченний прокруток не підходить для кожного контексту. Сайти, де користувачі повинні швидко знайти певні елементи (наприклад, каталоги або результати пошуку) можуть скористатися з класичної патології з нижньою колонкою або кнопкою "Load More". Рішення повинно бути засноване на структурі користувача і контенту.

Основні впровадження нефіцитного скролу

Впровадження базового нескінченного прокрутки передбачає прослуховування за події та додавання нового контенту, коли користувач підійшов до нижньої сторінки. Нижче наведено покроковий посібник для побудови простої версії.

Структура HTML

Налаштуйте елемент контейнера, який зберігає початковий вміст. Тут будуть використані всі нові елементи.

<div id="content">
 <!-- Existing items loaded on page load -->
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
</div>
<div id="loading-indicator" style="display:none;">Loading more content...</div>

Приклади JavaScript

За допомогою скролу ми виявимо, коли користувач прокручується біля нижньої частини сторінки. Порог (]) запобігає вистрілу запізненням.

const contentDiv = document.getElementById('content');
const loadingIndicator = document.getElementById('loading-indicator');
let isLoading = false; // Prevent duplicate requests

window.addEventListener('scroll', () => {
 const scrollPosition = window.innerHeight + window.scrollY;
 const documentHeight = document.body.offsetHeight;

 if (scrollPosition >= documentHeight - 200 && !isLoading) {
 loadMoreContent();
 }
});

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 // Simulate fetching new content from server
 const newItem = document.createElement('div');
 newItem.className = 'item';
 newItem.textContent = `New item loaded at ${new Date().toLocaleTimeString()}`;
 contentDiv.appendChild(newItem);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

Підвищення реалізації

Для виготовлення нескінченного прокрутки, виконання та досвіду користувача необхідно рафінувати.

Дебінг заходу Scroll

Сирий прокрутка швидко подає, що може деградувати продуктивність. Використання функції відхилення забезпечує контроль тільки після короткого паузи в прокручуванні.

function debounce(func, wait) {
 let timeout;
 return function executedFunction(...args) {
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(this, args), wait);
 };
}

window.addEventListener('scroll', debounce(checkScrollPosition, 100));

Використання API-сервера Intersection

Найкращий і сучасний підхід – // Інтерсекційний оглядовий огляд . Він відстежує спонінтел, який розміщується в нижній частині вмісту і вогневий зворотний дзвінок, коли він стає видимим.

const sentinel = document.createElement('div');
sentinel.id = 'scroll-sentinel';
contentDiv.after(sentinel);

const observer = new IntersectionObserver((entries) => {
 if (entries[0].isIntersecting && !isLoading) {
 loadMoreContent();
 }
});
observer.observe(sentinel);

Це дозволяє прикріпити прокрутку і значно легше на головній нитки.

Рукаючий End-of-Content Gracefully

Якщо не існує більше даних, нескінченний прокруток повинен зупинити спробу на завантаження. Простий прапор або відповідь від сервера з може керуватися цим майном.

let hasMoreContent = true;

async function loadMoreContent() {
 if (!hasMoreContent) return;
 // ... fetch data
 if (response.data.length === 0) hasMoreContent = false;
}

Завантаження реальних даних з AJAX

Для того, щоб зробити нескінченний прокрутку динамічним, необхідно викопувати дані з сервера за допомогою AJAX. API Fetch є сучасним стандартом.

Приклад API кешування

Цей приклад показує, що ваш сервер містить дані JSON з URL або параметр номер сторінки.

const contentUrl = '/api/items?page=1';
let currentPage = 1;

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 const response = await fetch(`/api/items?page=${++currentPage}`);
 if (!response.ok) throw new Error('Network error');
 const data = await response.json();

 data.items.forEach(item => {
 const el = document.createElement('div');
 el.className = 'item';
 el.textContent = item.title;
 contentDiv.appendChild(el);
 });

 // If the server indicates no more data, disable loading
 if (data.is_last_page) hasMoreContent = false;
 } catch (error) {
 console.error('Failed to load content:', error);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

Відповіді та помилки сервера

Завжди включають надійну обробку помилок. Виконайте варіант птиці, якщо фіксатор не виходить, і не допускайте нескінченних петель завантаження, обмежуючи речення. Для кращого досвіду користувача, виводимо повідомлення "Зима пішла неправильно" з кнопкою "Зверху знову".

Розширення досвіду користувача

Смут UX є критичним для збереження користувачів. Тут є кілька поліпшень, щоб розглянути.

Показники навантаження

Використовуйте шпиннер, бари, хід, або екрани скелета, щоб вказати, що більше вмісту є fetched. Це означає користувачів, що сайт працює.

<div id="loading" class="loading-spinner"></div>

CSS анімації для шпинерів легкий. Для шнеків, створення блоків для власників сайтів, які ми можемо самі перенести контент.

Розгляд доступності

Доступний нескінченний прокруток вимагає:

  • Фокус управління: Коли нові елементи навантаження, опишіть їх на зчитувачі екрана, використовуючи регіони.
  • Keyboard навігація: Забезпечити користувачам можливість перевернути новий вміст за допомогою клавіатури (Tab). Уникнути фокусування траплення.
  • Похідний до нескінченного прокрутки: Забезпечити кнопку "Подивитися більше" як випадання для користувачів, які воліють явний контроль.
<div id="content" aria-live="polite">...</div>

Мобільна оптимізація

На мобільних пристроях часто гасить подія, але Міжсекційний спостерігач є більш надійним. Також, регулювання порогу на рахунок для менших портів і сенсорної інерції.

Додаткові методи

Для високопродуктивних ситуацій, таких як корми соціальних мереж або великі каталоги, розгляньте ці оптимізації.

Затишне завантаження зображень

Новий вміст часто включає зображення. Завантажуйте ці за допомогою атрибута міток або // Спостереження розділу для зменшення пропускної здатності та покращення часу початкового навантаження.

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="..." />

Віртуальна прокрутка для великих списків

Якщо ваш нескінченний прокруток керує тисячами вузлів DOM, продуктивність буде деградувати. Віртуальний прокручування (або віконний) надає тільки видимі елементи, різко зменшуючи використання пам'яті. Біблії люблять Clusterize.js] або React Virtualized може допомогти, але чисті JavaScript-провайдери можливі для простих випадків.

Перевантаження контенту

Щоб виключити сприйманий лаг, попередньо завантажте наступну партію вмісту в приховану ємність перед цим необхідним. Коли користувач прокручує до точки запуску, просто закрутіть попередньо завантажені елементи в видимий DOM.

Висновок

Впровадження нескінченного прокрутки з JavaScript може значно поліпшити взаємодію користувача, надаючи гладкий, безперервний досвід перегляду. З базового прокрутки слухача для просунутих спостерігачів Intersection та лази завантаження, техніка може бути налаштована на будь-які потреби веб-сайту. Пам'ятайте, що баланс продуктивності та доступності, і завжди забезпечують механізми запобіжності для користувачів, які воліють дискретну патологію. За допомогою коду та стратегій тут ви можете створити нескінченну функцію прокрутки, яка зберігає вашу аудиторію, досліджувану без розчарування.