تأجيل العمل حتى انتهاء الانتقال

يجب أن يكون التمرير على الويب سلسًا وسريع الاستجابة. إنّ تنفيذ المهام الثقيلة، مثل إعادة احتساب التنسيق أو تتبُّع إشارات بيانات الإحصاءات أو تعديلات DOM الديناميكية، أثناء الانتقال إلى أسفل الصفحة يمكن أن يؤدي إلى تشبّع سلسلة التعليمات الرئيسية، ما يؤدي إلى إسقاط اللقطات وتكرار تعديل التنسيق.

في السابق، كان المطوّرون يعتمدون على إلغاء ارتداد الحدث scroll باستخدام setTimeout() لتخمين وقت انتهاء الانتقال للأعلى أو للأسفل. ومع ذلك، فإنّ هذه الدوال المرتدة غير موثوقة بشكل كبير. وقد يتم تشغيلها أثناء تصفّح المستخدم.

يوفّر حدث scrollend حلاً موثوقًا للغاية يستند إلى الأداء. يُطلق المتصفّح حدث scrollend عندما يتوقف التمرير وتنتهي جميع عمليات الانتقال ويتم تحرير إيماءة اللمس.

كيفية الإعداد

لتنفيذ نمط تأجيل العمل:

1. إعداد حاوية قابلة للتمرير: أنشِئ حاوية باستخدام overflow: auto أو overflow: scroll.
2. الاستماع إلى أحداث scroll: استخدِم هذا المستمع فقط للمقاييس الديناميكية الأساسية أو لتنسيق التصميم الإعلامي. لا تنفِّذ أعمالاً ثقيلة هنا.
3. الاستماع إلى أحداث scrollend: سجِّل دالة استدعاء scrollend في حاوية الانتقال أو المستند نفسه.
4. تنفيذ العمليات المكلفة في دالة الاستدعاء: هذا هو المكان الذي يمكن فيه جلب المحتوى الديناميكي أو تشغيل تنسيقات DOM الشاملة بأمان.

مثال على الرمز

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