أحداث نهاية التمرير (scrollend) في CSS: دليل المطورين لاكتشاف ومعالجة اكتمال التمرير

لسنوات، واجه مطورو الويب سؤالًا يبدو بسيطًا: "هل انتهى المستخدم من التمرير؟" لقد كان الرد على هذا السؤال تحديًا معقدًا بشكل مدهش، مما أدى غالبًا إلى حلول بديلة تستهلك الأداء وتجارب مستخدم أقل من مثالية. إن حدث scroll التقليدي، على الرغم من فائدته، يتم إطلاقه بلا هوادة أثناء إيماءة التمرير، مما يجعله أداة ضعيفة لاكتشاف الاكتمال. لكن منصة الويب تتطور باستمرار، وقد وصل حل حديث وأنيق: حدث scrollend.

سيستكشف هذا الدليل الشامل حدث scrollend بالتفصيل. سنتعمق في المشاكل التاريخية التي يحلها، وتطبيقه العملي، وحالات الاستخدام القوية، وكيف يتناسب مع النظام البيئي الأوسع لواجهات برمجة تطبيقات المتصفح الحديثة. سواء كنت تبني موجزًا ذا تمرير لا نهائي، أو واجهة مستخدم ديناميكية، أو ترغب ببساطة في كتابة كود أكثر كفاءة، فإن فهم scrollend ضروري لتطوير الواجهة الأمامية الحديثة.

التحدي القديم: لماذا كان اكتشاف اكتمال التمرير صعبًا جدًا

لتقدير أهمية حدث scrollend، يجب علينا أولاً أن نفهم قيود سلفه، حدث scroll. يرتبط حدث scroll بأي عنصر قابل للتمرير (بما في ذلك كائن window) ويتم إطلاقه في كل مرة يتغير فيها موضع التمرير، حتى لو ببكسل واحد.

في حين أن هذا الإطلاق عالي التردد مثالي لإنشاء تأثيرات في الوقت الفعلي مثل الخلفيات المنظرية (parallax) أو مؤشرات التقدم، إلا أنه يمثل كابوسًا للأداء عند اكتشاف متى توقف التمرير. يمكن أن يؤدي إرفاق منطق معقد مباشرة بمستمع حدث scroll إلى تقطع كبير في الأداء وعدم استجابة، حيث يتم قصف الخيط الرئيسي للمتصفح باستدعاءات الدوال.

الحل الكلاسيكي البديل: استخدام تقنية "Debouncing" مع `setTimeout`

كان الحل القياسي لسنوات هو تقنية تسمى "debouncing". الفكرة هي استخدام مؤقت (setTimeout) للانتظار لفترة قصيرة من عدم النشاط قبل تنفيذ دالة ما. إليك الشكل الذي يبدو عليه النمط الكلاسيكي:

            
const scrollableElement = document.getElementById('my-scroll-area');
let scrollTimer;

scrollableElement.addEventListener('scroll', () => {
  // Clear the previous timer on each scroll event
  clearTimeout(scrollTimer);

  // Set a new timer
  scrollTimer = setTimeout(() => {
    // This code runs only after the user has stopped scrolling for 200ms
    console.log('Scrolling has likely ended.');
    // ... execute heavy logic here
  }, 200);
});

            

              
                Copy
              
            
          

هذا النهج، على الرغم من فعاليته، له العديد من العيوب الحاسمة:

• عدم الموثوقية: مدة المهلة (على سبيل المثال، 200 مللي ثانية) هي تخمين تعسفي. إذا كانت قصيرة جدًا، فقد يتم تنفيذ الدالة قبل الأوان أثناء التمرير البطيء. إذا كانت طويلة جدًا، تبدو واجهة المستخدم بطيئة وغير مستجيبة لإجراء المستخدم. لا يمكنها التعامل بشكل موثوق مع التمرير بقوة الدفع (النقرات السريعة على لوحة التتبع أو الشاشة التي تعمل باللمس) حيث يستمر التمرير بعد توقف التفاعل المادي للمستخدم.
• عبء الأداء: حتى مع استخدام "debouncing"، لا يزال مستمع حدث scroll يعمل باستمرار، وتُنفذ دورة clearTimeout/setTimeout عشرات أو مئات المرات في الثانية أثناء التمرير. هذا جهد حسابي ضائع.
• تعقيد الكود: يضيف هذا النهج حالة إضافية (متغير scrollTimer) ومنطقًا متكررًا إلى قاعدة الكود الخاصة بك، مما يجعل قراءته وصيانته أكثر صعوبة.

كانت الويب بحاجة إلى حل أصلي على مستوى المتصفح يكون موثوقًا وعالي الأداء. هذا الحل هو scrollend.

تقديم حدث `scrollend`: الحل الأصلي

حدث scrollend هو حدث جافاسكريبت جديد يتم إطلاقه عند اكتمال إجراء التمرير الذي يقوم به المستخدم. إنه مصمم ليكون الإجابة النهائية والأصلية من المتصفح لمشكلة اكتمال التمرير. يتجنب بأناقة جميع المشكلات المرتبطة بالحل البديل القائم على "debouncing".

الفوائد الرئيسية لحدث `scrollend`

• الأداء أولاً: على عكس حدث scroll، يتم إطلاق حدث scrollend مرة واحدة فقط عند انتهاء إيماءة التمرير. هذا يقلل بشكل كبير من عبء المعالجة ويساعد في الحفاظ على الخيط الرئيسي لتطبيق الويب الخاص بك خاليًا، مما يؤدي إلى رسوم متحركة أكثر سلاسة وواجهة مستخدم أكثر استجابة.
• موثوقية عالية: يحدد محرك العرض في المتصفح متى انتهى التمرير بالفعل. هذا أكثر دقة بكثير من مجرد مؤقت بسيط. يتعامل بشكل صحيح مع أنواع التمرير المختلفة، بما في ذلك عجلة الماوس، والنقرات السريعة على لوحة التتبع مع قوة الدفع، والتنقل باستخدام لوحة المفاتيح (مفاتيح الأسهم، مفتاح المسافة)، وحتى التمرير البرمجي.
• كود مبسط: التنفيذ نظيف وتعريفي وبديهي. ما عليك سوى إضافة مستمع حدث لـ scrollend، وانتهى الأمر. لا مزيد من المؤقتات، ولا إدارة للحالة، ولا منطق متكرر.

كيفية استخدام حدث `scrollend`: دليل عملي

استخدام حدث scrollend بسيط بشكل ملحوظ. تقوم بإرفاقه بعنصر قابل للتمرير تمامًا مثل أي حدث آخر.

الصيغة الأساسية

يمكنك الاستماع لحدث scrollend على document أو window أو أي عنصر محدد يحتوي على محتوى فائض (أي قابل للتمرير).

            
// Listen on a specific scrollable container
const scrollContainer = document.querySelector('.scroll-container');

scrollContainer.addEventListener('scrollend', (event) => {
  console.log('Scroll has ended on the specific container!');
  // Your logic to run on scroll completion goes here.
});

// Or, listen on the entire document
document.addEventListener('scrollend', () => {
  console.log('A scroll anywhere on the document has ended.');
});

            

              
                Copy
              
            
          

كائن event الذي يتم تمريره إلى المستمع هو مثيل قياسي من Event. لا يحمل حاليًا خصائص إضافية مثل موضع التمرير النهائي، ولكن يمكنك الوصول إليها بسهولة من هدف الحدث (على سبيل المثال، scrollContainer.scrollTop).

توافق المتصفحات واكتشاف الميزات

بما أن scrollend هو واجهة برمجة تطبيقات حديثة، فإن توافق المتصفحات يعد اعتبارًا رئيسيًا للجمهور العالمي. اعتبارًا من أواخر عام 2023، أصبح مدعومًا في أحدث إصدارات Chrome و Edge و Firefox. ومع ذلك، من الضروري دائمًا التحقق من جداول التوافق المحدثة على موارد مثل MDN Web Docs أو CanIUse.com.

لضمان عدم تعطل الكود الخاص بك في المتصفحات القديمة، يجب عليك دائمًا استخدام اكتشاف الميزات.

            
const element = document.getElementById('my-element');

if ('onscrollend' in window) {
  // The browser supports scrollend, so we can use it
  element.addEventListener('scrollend', () => {
    console.log('Modern scrollend event fired!');
    performActionOnScrollEnd();
  });
} else {
  // Fallback for older browsers using the debounce method
  let scrollTimer;
  element.addEventListener('scroll', () => {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(performActionOnScrollEnd, 150);
  });
}

function performActionOnScrollEnd() {
  // All your logic lives in this function
  console.log('Action triggered after scroll completion.');
}

            

              
                Copy
              
            
          

يضمن نهج التحسين التدريجي هذا أن يحصل المستخدمون الذين لديهم متصفحات حديثة على أفضل أداء، بينما يظل لدى المستخدمين على المتصفحات القديمة تجربة وظيفية (وإن كانت أقل مثالية).

متى يتم إطلاق حدث `scrollend`؟ فهم المحفزات

محرك المتصفح ذكي بشأن ما يشكل "نهاية" التمرير. سيتم إطلاق حدث scrollend عندما:

• يحرر المستخدم مقبض شريط التمرير بعد سحبه.
• يرفع المستخدم إصبعه عن شاشة اللمس بعد إيماءة التمرير أو النقر السريع، ويتوقف أي تمرير ناتج عن قوة الدفع تمامًا.
• يحرر المستخدم مفتاحًا بدأ عملية التمرير (مثل مفاتيح الأسهم، Page Up/Down، Home، End، Spacebar).
• يكتمل التمرير البرمجي، مثل الذي يتم بدؤه بواسطة element.scrollTo() أو element.scrollIntoView().

الأهم من ذلك، أن الحدث لا يتم إطلاقه إذا لم تؤد إيماءة التمرير إلى أي تغيير في موضع التمرير. علاوة على ذلك، إذا بدأ إجراء تمرير جديد قبل أن يكتمل زخم الإجراء السابق تمامًا، يتم إلغاء حدث scrollend الأولي، وسيتم إطلاق حدث جديد فقط عند انتهاء إجراء التمرير اللاحق. هذا السلوك هو بالضبط ما يحتاجه المطورون لاكتشاف الاكتمال بشكل موثوق.

حالات الاستخدام العملية والأمثلة العالمية

تتضح القوة الحقيقية لحدث scrollend عند تطبيقه على تحديات تطوير الويب الشائعة. إليك العديد من حالات الاستخدام العملية التي تفيد الجماهير في جميع أنحاء العالم.

1. تحديثات واجهة المستخدم عالية الأداء

تخفي العديد من الواجهات أو تظهر عناصر بناءً على موضع التمرير. مثال شائع هو زر "العودة إلى الأعلى" أو الترويسة الثابتة التي يتغير مظهرها.

الطريقة القديمة (باستخدام `scroll`): التحقق من scrollTop عند كل حدث تمرير، مما قد يسبب تقطعًا في الأداء. الطريقة الجديدة (باستخدام `scrollend`): انتظر حتى يتوقف المستخدم عن التمرير، ثم تحقق من موضع التمرير مرة واحدة وقم بتحديث واجهة المستخدم. يبدو هذا أكثر سلاسة وكفاءة بكثير.

            
const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scrollend', () => {
  if (window.scrollY > 400) {
    backToTopButton.classList.add('visible');
  } else {
    backToTopButton.classList.remove('visible');
  }
});

            

              
                Copy
              
            
          

2. التحليلات وتتبع سلوك المستخدم

تخيل أنك تريد معرفة أي قسم من صفحة منتج طويلة يهتم به المستخدمون أكثر. بدلاً من إطلاق حدث تحليلي في كل مرة يدخل فيها قسم إلى العرض (والذي يمكن أن يكون مزعجًا)، يمكنك إطلاقه عندما يتوقف المستخدم عن التمرير داخل هذا القسم. يوفر هذا إشارة أقوى بكثير على نية المستخدم.

            
const pricingSection = document.getElementById('pricing');

document.addEventListener('scrollend', () => {
  const rect = pricingSection.getBoundingClientRect();
  // Check if the pricing section is largely in the viewport when scroll ends
  if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
    // Send analytics event only when the user pauses on this section
    trackEvent('user_paused_on_pricing');
  }
});

            

              
                Copy
              
            
          

3. التحميل الكسول للمحتوى أو جلب البيانات

بالنسبة للموجزات ذات التمرير اللانهائي، تقوم عادةً بتحميل المزيد من المحتوى عندما يقترب المستخدم من الأسفل. يمنعك استخدام scrollend من تشغيل عمليات جلب بيانات متعددة إذا قام المستخدم بالتمرير لأعلى ولأسفل بسرعة حول نقطة التشغيل.

            
const feed = document.querySelector('.infinite-feed');

feed.addEventListener('scrollend', () => {
  // Check if user is near the bottom of the scrollable area
  if (feed.scrollTop + feed.clientHeight >= feed.scrollHeight - 100) {
    loadMoreContent();
  }
});

            

              
                Copy
              
            
          

4. مزامنة عناصر واجهة المستخدم

فكر في جدول بيانات معقد أو لوحة معلومات مالية بها عدة لوحات قابلة للتمرير أفقيًا تحتاج إلى البقاء متزامنة. باستخدام scrollend، يمكنك تحديث موضع اللوحات الأخرى فقط بعد أن ينتهي المستخدم من التفاعل مع إحداها، مما يمنع الحركات المتقطعة وغير المتزامنة أثناء التمرير نفسه.

5. تحديث علامة URL المرجعية (Hash) للتطبيقات أحادية الصفحة (SPAs)

في صفحة هبوط طويلة ذات تنقل قائم على الأقسام (مثل "عنا"، "الميزات"، "اتصل بنا")، من الشائع تحديث علامة URL المرجعية (على سبيل المثال، example.com#features) أثناء تمرير المستخدم. يمكن أن يؤدي استخدام حدث scroll إلى تلويث سجل المتصفح. باستخدام scrollend، يمكنك الانتظار حتى يستقر المستخدم في قسم جديد قبل تحديث عنوان URL بشكل نظيف مرة واحدة.

مقارنة `scrollend` مع واجهات برمجة تطبيقات التقاطع والتمرير الأخرى

توفر منصة الويب مجموعة غنية من الأدوات للتعامل مع التفاعلات المتعلقة بالتمرير. من المهم معرفة الأداة التي يجب استخدامها لكل مهمة.

• حدث scroll: استخدم هذا للتأثيرات التي يجب أن تكون متزامنة تمامًا مع موضع التمرير في الوقت الفعلي، مثل الرسوم المتحركة المنظرية (parallax) أو أشرطة تقدم التمرير. كن على دراية بالأداء وقم بتقييد أي منطق معقد بشدة أو استخدم تقنية debounce.
• حدث scrollend: استخدم هذا كلما احتجت إلى تشغيل إجراء بعد اكتمال إيماءة التمرير. إنه الخيار المثالي لتحديثات واجهة المستخدم، وجلب البيانات، والتحليلات التي لا تحتاج إلى الحدوث في الوقت الفعلي.
• واجهة برمجة تطبيقات Intersection Observer: هذه الواجهة عالية الأداء لاكتشاف متى يدخل عنصر أو يغادر منفذ العرض (أو عنصر آخر). إنها تجيب على السؤال، "هل هذا العنصر مرئي الآن؟". إنها مثالية للتحميل الكسول للصور، وتشغيل الرسوم المتحركة عند ظهور العناصر، أو إيقاف مقاطع الفيديو مؤقتًا عندما تكون خارج الشاشة. تعمل بشكل جميل جنبًا إلى جنب مع scrollend. على سبيل المثال، يمكنك استخدام `Intersection Observer` لمعرفة متى يكون قسم يتم تتبعه تحليليًا مرئيًا، ثم استخدام scrollend للتأكد من أن المستخدم قد توقف هناك بالفعل.
• الرسوم المتحركة المستندة إلى التمرير في CSS: هذه آلية أحدث، تعتمد بالكامل على CSS، لإنشاء رسوم متحركة مرتبطة مباشرة بتقدم التمرير. إنها تنقل عمل الرسوم المتحركة من الخيط الرئيسي تمامًا، مما يجعلها الخيار الأكثر أداءً للتأثيرات البصرية المرتبطة بالتمرير. إنها تعريفية ولا تتضمن أي جافاسكريبت.

النقاط الرئيسية وأفضل الممارسات

للتلخيص، إليك أفضل الممارسات الأساسية للتعامل مع اكتمال التمرير في تطوير الويب الحديث:

1. فضل scrollend لمنطق الاكتمال: لأي مهمة تحتاج إلى التشغيل بعد توقف المستخدم عن التمرير، يجب أن يكون scrollend هو خيارك الافتراضي.
2. استخدم اكتشاف الميزات للمتانة: تحقق دائمًا من دعم المتصفح وقدم حلاً بديلاً (مثل طريقة debounce الكلاسيكية) لضمان عمل تطبيقك لجميع المستخدمين في جميع أنحاء العالم.
3. اجمع بين واجهات برمجة التطبيقات للحصول على حلول قوية: لا تفكر في هذه الواجهات بمعزل عن بعضها. استخدم Intersection Observer لاكتشاف الرؤية و scrollend لاكتشاف نية المستخدم (التوقف)، مما يخلق تجارب مستخدم متطورة وعالية الأداء.
4. احتفظ بحدث scroll للتأثيرات في الوقت الفعلي: استخدم حدث scroll الخام فقط عند الضرورة القصوى للرسوم المتحركة التي تحتاج إلى أن تكون مرتبطة بإحكام بموضع التمرير، وكن دائمًا على دراية بالآثار المترتبة على الأداء.

الخلاصة: عصر جديد لمعالجة التمرير

يمثل تقديم حدث scrollend خطوة مهمة إلى الأمام لمنصة الويب. إنه يستبدل حلاً بديلاً هشًا وغير فعال بميزة متصفح أصلية قوية وعالية الأداء وسهلة الاستخدام. من خلال فهم وتنفيذ scrollend، يمكن للمطورين كتابة كود أنظف، وبناء تطبيقات أسرع، وإنشاء تجارب مستخدم أكثر بديهية وسلاسة لجمهور عالمي متنوع. أثناء بناء مشروعك التالي، ابحث عن فرص لاستبدال مستمعي التمرير القدامى الذين يستخدمون debounce واحتضن العالم الحديث والفعال لـ scrollend.