Infinite Scroll یک تکنیک محبوب است که در وب سایت ها برای افزایش تعامل کاربر با بارگذاری مداوم محتوای جدید به عنوان کاربر اسکرول پایین صفحه استفاده می شود، این رویکرد بازدیدکنندگان را طولانی تر نگه می دارد و تجربه مرور یکپارچه را فراهم می کند. پیاده سازی اسکرول بی نهایت با جاوا اسکریپت ساده است و می تواند سفارشی برای متناسب با نیازهای مختلف وب سایت، از رسانه های اجتماعی به لیست محصولات تجارت الکترونیک.

چرا از اسکرول بی نهایت استفاده کنیم؟

Infinite Scroll مزایای مختلفی را ارائه می دهد که به طور مستقیم بر تعامل کاربر و عملکرد سایت تأثیر می گذارد:

  • نیاز به دزدی را کاهش می دهد: با حذف بارگذاری صفحه و کلیک های دستی، مرور نرم تر و شهودی تر می شود.
  • کشف محتوا: به عنوان آیتم های جدید به طور خودکار بارگذاری، بازدید کنندگان بیشتر احتمال دارد مقالات اضافی، محصولات و یا پست های دیگر که ممکن است در غیر این صورت از دست بدهند.
  • معیارهای تعامل کاربر را اثبات می کند: زمان در صفحه، صفحات در هر جلسه، و عمق اسکرول اغلب افزایش می یابد زیرا جریان طبیعی مرور حفظ می شود.
  • یک تجربه کاربری مدرن و پویا را ارائه می دهد: بسیاری از سیستم عامل های محبوب مانند توییتر، Pinterest و اینستاگرام از اسکرول بی نهایت برای ایجاد یک احساس برنامه مانند در وب استفاده می کنند.

با این حال، اسکرول نامحدود برای هر سایت زمینه مناسب نیست، جایی که کاربران باید به سرعت اقلام خاصی را پیدا کنند (به عنوان مثال، فهرست دایرکتوری یا نتایج جستجو) ممکن است از پانویسی کلاسیک با یک دکمه پا یا "Load More" بهره مند شوند. این تصمیم باید بر اساس قصد کاربر و ساختار محتوا باشد.

پیاده سازی پایه Infinite Scroll

پیاده سازی یک پیمایش بی نهایت اساسی شامل گوش دادن به رویداد و ارائه محتوای جدید زمانی که کاربر به پایین صفحه نزدیک می شود، در زیر یک راهنمای گام به گام برای ساخت یک نسخه ساده است.

ساختار HTML

یک عنصر container ایجاد کنید که محتوای اولیه را در اختیار دارد.همه موارد جدید در اینجا اضافه می شوند.

<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';
 }
}

افزایش اجرای

برای یک پیمایش نامحدود، عملکرد و تجربه کاربری باید اصلاح شود.

دانلود بازی The Scroll Event

رویداد پیمایش خام به سرعت آتش می گیرد، که می تواند عملکرد را کاهش دهد.با استفاده از یک تابع debounce، چک را تنها پس از یک مکث کوتاه در اسکرول کردن اجرا می کند.

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));

استفاده از Interبخش Viewr API

یک رویکرد کارآمد و مدرن تر ناظر بخش است که یک عنصر فرستنده را در پایین محتوا قرار می دهد و هنگامی که قابل مشاهده است، یک callback را آتش می زند.

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);

این امر نیاز به اتصال یک شنونده اسکرول را از بین می برد و به طور قابل توجهی در موضوعات اصلی سبک تر است.

پایان دادن به محتوا Gracely

هنگامی که اطلاعات بیشتری وجود ندارد، اسکرول بی نهایت باید تلاش برای بارگیری را متوقف کند.یک پرچم ساده یا پاسخی از سرور با یک ملک می تواند این را کنترل کند.

let hasMoreContent = true;

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

دانلود بازی Real Data با AJAX

برای ایجاد Dynamic اسکرول نامحدود، شما باید داده ها را از یک سرور با استفاده از AJAX استخراج کنید. API Fetch استاندارد مدرن است.

نمونه های Fetch API

این مثال فرض می کند که سرور شما داده های JSON را با یک پارامتر (FLT:8 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';
 }
}

مدیریت پاسخ ها و خطا های سرور

همیشه شامل کنترل خطای قوی است.یک گزینه ی دوباره را نشان دهید اگر خروجی شکست بخورد و از حلقه های بارگذاری نامحدود با محدود کردن تخته ها اجتناب کنید.

User Experience Boosts

UX صاف برای حفظ کاربران بسیار مهم است.در اینجا چندین پیشرفت در نظر گرفته شده است.

دانلود بازی Reload Indicators

از یک اسپینر، نوار پیشرفت یا صفحه نمایش اسکلت استفاده کنید تا نشان دهد که محتوای بیشتری در حال جمع آوری است.این به کاربران اطمینان می دهد که سایت کار می کند.

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

انیمیشن های CSS برای اسپینر سبک هستند، برای صفحه نمایش اسکلت، بلوک های محلی ایجاد می کنند که شبیه سازی طرح نهایی محتوا هستند.

نظرات دسترسی

اسکرول نامحدود قابل دسترسی نیاز است:

  • مدیریت: هنگامی که اقلام جدید بارگیری می شوند، آنها را به نمایش خوانندگان با استفاده از مناطق [FLT: 11] معرفی کنید.
  • ناوبری کلید: کاربران می توانند محتوای تازه بارگذاری شده را از طریق صفحه کلید (Tab) عبور کنند.
  • جایگزین به پیمایش بی نهایت: یک دکمه "Load More" را به عنوان یک شکست برای کاربران که ترجیح می دهند کنترل صریح.
<div id="content" aria-live="polite">...</div>

بهینه سازی موبایل Mobile

در دستگاه های تلفن همراه، رویداد اسکرول به طور مکرر آتش می زند، اما ناظر Interبخش قابل اعتماد تر است، همچنین آستانه را برای حساب کردن پورت های کوچکتر و لمس در داخله تنظیم می کند.

تکنیک های پیشرفته

برای موقعیت های با کارایی بالا مانند فید رسانه های اجتماعی یا کاتالوگ های بزرگ، این بهینه سازی ها را در نظر بگیرید.

تصاویر دانلود Lazy Load

محتوای جدید اغلب شامل تصاویر است. Lazy Load این ویژگی ها را در [FLT13] تگ های [FLT: 14] یا ناظر بخش بخش دوم برای کاهش پهنای باند و بهبود زمان بارگذاری اولیه.

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

دانلود بازی Virtual Scrolling for Big Lists

اگر پیمایش نامحدود شما هزاران گره DOM را مدیریت کند، عملکرد کاهش می یابد. اسکرول مجازی (یا پنجره) تنها اقلام قابل مشاهده را ارائه می دهد، به طور چشمگیری کاهش استفاده از کتابخانه ها مانند Cimmerize.js یا Reactized می تواند کمک کند، اما پیاده سازی های جاوا اسکریپت خالص برای موارد ساده امکان پذیر است.

محتوای پیش بارگذاری Content

برای حذف تاخیر درک شده، دسته بعدی محتوا را به یک ظرف پنهان قبل از نیاز آن آپلود کنید.هنگامی که کاربر به نقطه ماشه می رود، به سادگی عناصر پیش بارگذاری شده را به DOM قابل مشاهده مبادله کنید.

نتیجه گیری

پیاده سازی پیمایش نامحدود با جاوا اسکریپت می تواند به طور قابل توجهی افزایش تعامل کاربر با ارائه یک تجربه مرور صاف و مداوم از یک شنونده اسکرول پایه به پیشرفته Interبخش Viewerr و بارگذاری تنبل، این تکنیک می تواند به یاد داشته باشید برای تعادل عملکرد و دسترسی، و همیشه مکانیسم های عقب نشینی برای کاربران که ترجیح می دهند تا پا به همراه کد و استراتژی های ذکر شده در اینجا، شما می توانید یک ویژگی بی نهایت بدون کاوش مخاطبان خود را ایجاد کنید.