Defer Work Until Scroll Ends

پیمایش در وب باید روان و سریع باشد. اجرای کارهای سنگین (مانند محاسبه مجدد چیدمان، ردیابی چراغ‌های داده‌های تحلیلی، یا به‌روزرسانی‌های DOM پویا) درحین پیمایش می‌تواند رشته اصلی را اشباع کند و منجر به افت فریم و کوبش چیدمان شود.

در گذشته، توسعه‌دهندگان برای حدس زدن زمان پایان پیمایش، به لرزش‌گیری رویداد scroll بااستفاده از setTimeout() متکی بودند. بااین‌حال، این توابع لرزش‌گیر به‌طور بدنامی غیرقابل‌اعتماد هستند. ممکن است زمانی‌که کاربر هنوز درحال پیمایش است، فعال شوند.

رویداد scrollend راه‌حلی بسیار قابل‌اعتماد و عملکردمحور ارائه می‌دهد. مرورگر دقیقاً زمانی رویداد scrollend را فعال می‌کند که پیمایش متوقف شده باشد، همه انتقال‌ها تمام شده باشد، و اشاره لمسی رها شده باشد.

نحوه پیاده‌سازی

برای پیاده‌سازی الگوی تعویق کار:

1. راه‌اندازی محفظه پیمایشی: محفظه‌ای با overflow: auto یا overflow: scroll ایجاد کنید.
2. گوش دادن به رویدادهای scroll: از این شنونده فقط برای سنجه‌های پویای پایه یا سبک‌بندی چیدمان اطلاعاتی استفاده کنید. کارهای سنگین را اینجا انجام ندهید.
3. گوش دادن به رویدادهای scrollend: ثبت یک callback scrollend روی ظرف پیمایش یا خود سند.
4. Execute Expensive work in the callback: This is where it's safe to fetch dynamic content or trigger comprehensive DOM layouts.

کد نمونه

.scroll-container {
  height: 300px;
  overflow-y: auto;
}

const scroller = document.querySelector('.scroll-container');

// 1. Informative feedback during scroll
scroller.addEventListener('scroll', () => {
  // Avoid dynamic heavier data updates here
  console.log('Scrolling dynamically... updates deferred');
});

// 2. Safe callback when scrolling rests
scroller.addEventListener('scrollend', () => {
  // Run layout recalculations or analytical beacons updates here
  const currentVisibleSection = findMostVisibleSection(scroller);
  fetchAdditionalData(currentVisibleSection);
});

پیاده‌سازی استراتژیک و روال‌های مطلوب

• باید از scrollend به‌جای رویدادهای scroll لرزش‌گیری‌شده هنگام ارسال فانوس‌های داده چیدمان یا واکشی پویای چیدمان محتوای جدید استفاده کنید.
• اگر درحال ساختن گردونه یا اسلایدهای گالری گواهی هستید، حتماً این را با تعاملات scrollSnapChange یا scrollSnapChanging جفت کنید.
• به‌روزرسانی‌های پویای وابسته به چیدمان را در بازخوان‌های پیمایش دیداری پویا دسته‌بندی نکنید.
• باید درنظر بگیرید که بزرگ‌نمایی و پیمایش نمای دیداری، رویداد scrollend را به‌درستی راه‌اندازی می‌کند.

راهبرد جایگزین

برای مرورگرهای پشتیبانی‌نشده، به رویداد scroll با setTimeout برگردید تا رویداد سفارشی scrollend را ارسال کنید.

function initializeDemo() {
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scrollend', () => {
    // Safe execution
  });
}

if ('onscrollend' in window) {
  initializeDemo();
} else {
  initializeDemo();
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scroll', () => {
    clearTimeout(window.scrollendtimer);
    window.scrollendtimer = setTimeout(() => {
      scroller.dispatchEvent(new CustomEvent('scrollend'));
    }, 100);
  });
}