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

تطبيقات Polyfill والتحسين التدريجي

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

'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 لبدء إجراءات مختلفة. ومن حالات الاستخدام الشائعة مزامنة عناصر واجهة المستخدم المرتبطة بالموضع الذي stopped عند التمرير. مثل: - مزامنة موضع تمرير العرض الدوار مع مؤشر منقط. - مزامنة عنصر معرض مع بياناته الوصفية. - استرجاع البيانات بعد انتقال المستخدم إلى علامة تبويب جديدة

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

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

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

نشكر Mehdi Kazemi على عمله الهندسي في هذا الشأن وRobert Flack على إرشادات واجهة برمجة التطبيقات والتنفيذ.