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

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

Adam Argyle

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

قبل

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

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

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

بعد

document.onscrollend = event => {…}

هذه هي الأشياء الجيدة. يأتي في وقت مناسب تمامًا ومليء بالظروف المفيدة قبل الانبعاثات.

دعم المتصفح

• 114
• 114
• 109
• x

المصدر

جرِّبه الآن

تفاصيل الحدث

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

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

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

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

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

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

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

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

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

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

الملء التلقائي والتحسين التدريجي

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

'onscrollend' in window
// true, if available

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

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. يمكنك أيضًا تجربة العرض التوضيحي المباشر.

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