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

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

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

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

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