تمرير أحداث المحاذاة

بدءًا من الإصدار 129 من Chrome، يمكنك استخدام الحدثَين scrollSnapChange وscrollSnapChanging من JavaScript. ومن خلال تنفيذ أحداث المحاذاة المدمجة، تصبح حالة المحاذاة غير المرئية سابقًا قابلة للتنفيذ في الوقت المناسب وستبقى صحيحة دائمًا. لم يكن من السهل عليك الاطّلاع على هذه الأحداث.

قبل scrollSnapChange، كان بإمكانك استخدام أداة مراقبة التقاطع لمعرفة العنصر الذي كان يعبر منفذ التمرير، ولكن كان تحديد ما تم اقتصاصه محصورًا في بعض الحالات. على سبيل المثال، يمكنك رصد ما إذا كانت عناصر المحاذاة تملأ منفذ التمرير أو تملأ معظم منفذ التمرير. لإجراء ذلك، ستلاحظ عناصر متقاطعة في مساحة التمرير، ثم استنادًا إلى العنصر الذي يستهلك معظم مساحة التمرير، لنفترض أنّ هذا العنصر كان هدف محاذاة، ثم انتظِر إلى scrollend وسيتم التعامل مع العنصر المطلوب (الهدف الفاصل).

قبل scrollSnapChanging، لم يكن من الممكن معرفة ما إذا كان سيتم تغيير هدف المحاذاة أو التغيير إليه (مثل الانتقال بالتمرير).

يسرّنا إعلامك بأنّ هذه الأحداث الجديدة تجعل هذه المعلومات متاحة بسرعة وسهولة. ويتيح ذلك تفاعلات محاذاة التمرير للوصول إلى ما هو أبعد من إمكاناته الحالية، بالإضافة إلى تنسيق علاقات المحاذاة عند التمرير وسيناريوهات تقديم ملاحظات جديدة لواجهة المستخدم.

scrollSnapChange

لا يتم تنشيط هذا الحدث إلا إذا أدّت إيماءة التمرير إلى الإبقاء على هدف محاذاة جديد وبالترتيب التالي

1. بعد توقُّف التمرير.
2. قبل scrollend

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

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

يعرض الحدث العنصر الملتقط على كائن الحدث باسم snapTargetBlock وsnapTargetInline. إذا كان شريط التمرير أفقيًا فقط، ستكون السمة snapTargetBlock هي null. ستكون قيمة الخاصية هي عقدة العنصر.

تفاصيل فريدة لـ ScrollSnapChange

لا يتم تنشيطها حتى يُفرِغ المستخدم عن الإيماءة.

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

لا يتم تنشيطه إذا لم يتغير هدف المحاذاة

ويتمثل الحدث في تغيير المحاذاة، وإذا لم يتغير هدف المحاذاة، لن يتم تنشيط الحدث، حتى إذا تفاعل أحد المستخدمين مع شريط التمرير. ومع ذلك، أجرى المستخدم عملية الانتقال في الواقع، وبالتالي عند اكتمال عملية الانتقال، يستمر تنشيط حدث scrollend.

scrollSnapChanging

يتم تنشيط هذا الحدث فور تحديد المتصفّح أنّ إيماءة التمرير تتضمّن أو ستؤدي إلى إنشاء هدف محاذاة جديد. ينشط بلهفة وأثناء التمرير.

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

يعرض الحدث العنصر الملتقط على كائن الحدث باسم snapTargetBlock وsnapTargetInline. إذا كان شريط التمرير عموديًا فقط، ستكون السمة snapTargetInline هي null. ستكون قيمة الخاصية هي عقدة العنصر.

تفاصيل فريدة لـ scrollSnapChange

يتم إطلاقها مبكرًا وبشكل متكرّر أثناء إيماءة الانتقال للأعلى أو للأسفل

على عكس scrollSnapChange التي تنتظر إيماءة تمرير كاملة من المستخدم، سيتم تنشيط هذا الحدث بلهفة أثناء انتقال المستخدم بإصبعه أو باستخدام لوحة لمس. إذا كان المستخدم يتنقّل ببطء بدون رفع إصبعه، سيُطلِق "scrollSnapChanging" عدة مرات أثناء الإيماءة طالما أنّ المستخدم يتحرك على عدّة أهداف محاذاة محتملة. في كل مرة ينتقل فيها المستخدم، إذا قرّر المتصفّح أنّه عند إصداره سيعتمد على هدف محاذاة جديد، يتم تنشيط الحدث لإعلامك بالعنصر المميّز.

لا يتم تنشيط جميع الأهداف السريعة خلال العملية إلى استهداف محاذاة جديد.

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

حالات الاستخدام والأمثلة

تتيح هذه الأحداث العديد من حالات الاستخدام الجديدة مع تسهيل تنفيذ الأنماط الحالية. وأحد الأمثلة الأساسية على ذلك هو تفعيل الصور المتحركة المُشغَّلة Snap. الكشف من الناحية السياقية عن عنصر المحاذاة أو العناصر الثانوية الخاصة به أو المعلومات المرتبطة به عندما يكون هدفًا موجزًا.

توضح الأنماط التالية بعض حالات الاستخدام لمساعدتك على أن تكون منتجًا على الفور.

إبراز شهادة

يروج هذا المثال للشهادة التي تم أخذها أو يركز عليها بصريًا.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

عرض الشرح للعنصر الذي تم اقتصاصه

يعرض هذا المثال شرحًا للعنصر الذي تم قطعه. تم تضمين كلا الحدثَين في هذا العرض التوضيحي، ما يتيح لك معرفة الاختلافات في التوقيت وتجربة المستخدم بين scrollSnapChange وscrollSnapChanging.

أضِف تأثيرات متحركة مرة واحدة، أطفال شريحة عرض تقديمي تم التقاطها

يعرف هذا المثال وقت استخدام شريحة جديدة والاعتماد عليها، وهو وقت رائع لتحريك المحتويات مرة واحدة.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

محاذاة على حرفَي x وy في شريط تمرير

تعمل محاذاة التمرير مع برامج التمرير التي تتيح التمرير الأفقي والعمودي. يعرض هذا العرض التوضيحي الهدفَين scrollSnapChanging وscrollSnapChange أثناء التنقّل في الشبكة. يوضح هذا العرض التوضيحي كيف أن العنصر الذي ينجذب إليه المتصفح قد لا يكون دائمًا هو العنصر الذي تعتقد أنه كذلك.

اثنين من أشرطة التمرير المرتبطة

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

علبة ألوان OKLCH

يتضمّن هذا العرض التوضيحي 3 أشرطة تمرير، يمثّل كل منها قناة لون مختلفة في OKLCH. تتم مزامنة العنصر المقطوعة مع مجموعة الراديو ذات الصلة ويمكن استرداد البيانات من نموذج يحتوي على الإدخالات. بالنسبة إلى مستخدم الماوس أو اللمس، يمكنك التمرير إلى القيمة التي تريدها. بالنسبة إلى مستخدمي لوحة المفاتيح، يمكنك الضغط على مفتاح التبويب (Tab) واستخدام مفاتيح الأسهم. بالنسبة لقارئ الشاشة، إنه مجرد نموذج.

التقاط صور متحركة مذهلة

يعمل هذا العرض التوضيحي تدريجيًا على تحسين تجربة محاذاة التمرير من خلال تفعيل الانتقالات التي تظهر عند المحاذاة باستخدام scrollsnapchange.

تحقَّق من توفّر دعم للحدث باستخدام JavaScript التالي:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

إدخال مسطرة قابلة للتمرير

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

مسار الغلاف

يعتمد هذا العرض التوضيحي على عملية إنشاء الصور المتحركة الممتازة التي أنشأها "براموس فان دام" من خلال التمرير باستخدام التمرير، وهي تعرض المحتوى المقتبس الشهير لنظام التشغيل macOS (فيديو تعليمي أيضًا). بشكل فريد، يتم استخدام scrollSnapChanging لإخفاء عنوان الألبوم واستخدام scrollSnapChange لعرض العنوان. وتساهم الفعاليات في تنظيم عرض بسيط للكتاب القديم وإضفاء لمسة مرحة عليه.

مزيد من الأفكار للتشجيع على الإبداع

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

• يؤدّي تشغيل التحميل الكسول، المعروف باسم Snapchange، إلى تشغيل العرض أو استرجاع البيانات.
• الصور المصغّرة لشريط الصور مرتبطة بصورة أكبر.
• تبديل التشغيل/الإيقاف المؤقت لمقطع فيديو دعائي لصورة مصغّرة تم أخذها للفيديو.
• التتبع في "إحصاءات Google"
• سرد القصص
• عجلة واجهة مستخدم Fortune/UX
• يحصل هدف المحاذاة على تلميح ثابت.
• انقر لالتقاط صورة
• محاذاة للعرض
• الأصوات بسرعة
• التمرير السريع على واجهة المستخدم
• علامات التبويب أو لوحات العرض الدوّارة القابلة للتمرير

دراسات إضافية

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

المصادر:

• مواصفات CSS
• شرح Snap Snap
• مجموعة CodePen