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

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

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 على إرشادات واجهة برمجة التطبيقات والتنفيذ.