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

احذف وظائف المهلة وتخلص من أخطائها، وها هو الحدث الذي تحتاجه فعلاً: Scrollend.

آدم أرجيل

Twitter GitHub

قبل حدث 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
});

أو استخدِم خاصية event:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

الرموز البرمجية polyfills والتحسين التدريجي

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

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

نتوجّه بالشكر إلى "مهدي كازيمي" على جهوده الهندسية في هذا المجال، وشكرًا لـ Robert Flack لتقديم إرشادات حول واجهة برمجة التطبيقات والتنفيذ.