Scrollend، حدث جديد في JavaScript

يمكنك حذف دوال المهلة والتخلّص من الأخطاء، إليك الحدث الذي تحتاجه حقًا: scrollend.

Adam Argyle

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

قبل

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

أفضل ما يمكن أن تفعله استراتيجية setTimeout() هذه هو معرفة ما إذا كان التمرير قد توقف لمدة 100ms. وهذا يجعل الأمر أشبه بحدث إيقاف مؤقت للتمرير، وليس حدث انتهاء التمرير.

بعد الحدث scrollend ، يُجري المتصفّح كل عمليات التقييم الصعبة هذه نيابةً عنك.

بعد

document.onscrollend = event => {…}

هذا هو المحتوى الجيد. يتم توقيتها بشكل مثالي ومليئة بالشروط الهادفة قبل إرسالها.

Browser Support

• 114
• 114
• 109
• 26.2

Source

جرِّبه الآن

تفاصيل الحدث

يتم تنشيط الحدث scrollend في الحالات التالية: - عندما يتوقف المتصفّح عن تحريك أو ترجمة الانتقال للأعلى أو للأسفل. - تم رفع إصبع المستخدم عن الشاشة. - حرّر مؤشر المستخدم شريط التمرير. - تم تحرير ضغطة مفتاح المستخدم. - اكتملت عملية الانتقال إلى الجزء. - اكتملت محاذاة مواضع التمرير. - اكتملت عملية "scrollTo()". - انتقل المستخدم إلى أسفل إطار العرض المرئي.

لا يتم تنشيط الحدث scrollend في الحالات التالية: - إذا لم تؤدِّ إيماءة المستخدم إلى أي تغييرات في موضع الانتقال (لم يحدث أي انتقال). - لم ينتج عن "scrollTo()" أي ترجمة.

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

استخدام الحدث

مثل أحداث التمرير الأخرى، يمكنك تسجيل المستمعين بعدة طرق.

addEventListener("scrollend",> (event) = {
  // scroll ended
});

aScrollingElement.addEventListener("scroll>end", (event) = {
  // scroll ended
});

أو استخدِم سمة الحدث:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

مكتبات Polyfill والتحسين التدريجي

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

'onscrollend' in window
// true, if available

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

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll => event = {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

هذه بداية جيدة لتحسين حدث scrollend تحسينًا متدرّجًا عندما يكون متاحًا. يمكنك أيضًا تجربة polyfill (NPM) الذي أنشأته والذي يقدّم أفضل ما يمكن للمتصفّح تقديمه:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

سيتم تحسين polyfill تحسينًا متدرّجًا لاستخدام حدث scrollend المضمّن في المتصفّح في حال توفّره. إذا لم يكن متاحًا، يراقب النص البرمجي أحداث المؤشر والتمرير لإجراء أفضل تقدير ممكن للحدث الذي ينهيه.

حالات الاستخدام

من الممارسات الجيدة تجنُّب العمليات الحسابية الثقيلة أثناء التمرير. تضمن هذه الممارسة أن يكون التمرير مجانيًا لاستخدام أكبر قدر ممكن من الذاكرة والمعالجة للحفاظ على سلاسة التجربة. يوفّر استخدام حدث scrollend الوقت المثالي لاستدعاء العمل الشاق وتنفيذه، لأنّ التمرير لم يعُد يحدث.

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

تخيَّل سيناريو مثل تمرير مستخدم لرسالة إلكترونية سريعًا. بعد الانتهاء من التمرير، يمكنك بعد ذلك تنفيذ الإجراء بناءً على المكان الذي تم التمرير إليه.

يمكنك أيضًا استخدام هذا الحدث للمزامنة بعد الانتقال الآلي أو الذي يجريه المستخدم، أو إجراءات مثل تسجيل الإحصاءات.

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

نشكر "مهدي كاظمي" على عمله الهندسي في هذا الشأن وروبرت فلاك على إرشاداته حول واجهة برمجة التطبيقات والتنفيذ.