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

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

Adam Argyle

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

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

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

بعد scrollend فسوف يُجري المتصفح عملية التقييم الصعبة هذه نيابة عنك.

document.onscrollend = event => {…}

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

جرِّبه الآن

تفاصيل الحدث

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

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