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

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

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

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

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

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