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

Adam Argyle

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

توافق المتصفّح

• 129
• 129
• x
• x

المصدر

توافق المتصفّح

• 129
• 129
• x
• x

المصدر

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

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

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

جرِّبها الآن
https://codepen.io/web-dot-dev/pen/jOjaaEP

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

يجب مراعاة مستخدمي قارئ الشاشة ولوحة المفاتيح عند استخدام ميزة "التمرير السريع" كآلية اختيار. ستساعدك الإرشادات الواردة في هذا الدليل التعليمي حول لوحة العرض الدوّارة من مبادرة إتاحة الويب في إنشاء مكوّنات يسهل الوصول إليها.

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. ستكون قيمة السمة هي عقدة العنصر.

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

يتم تشغيله مبكرًا وبشكل متكرر أثناء إيماءة التمرير

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

لا يتم تشغيل جميع استهدافات اللقطات على طول الطريق إلى استهداف لقطة جديد

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

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

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

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

إبراز شهادة

يروّج هذا المثال للشهادة المقتطعة أو يركز عليها بشكل مرئي.

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

https://codepen.io/web-dot-dev/pen/dyBZZPe

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

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

لقطة تغيير
https://codepen.io/web-dot-dev/pen/wvLPPBL

Snap Change
https://codepen.io/web-dot-dev/pen/QWXOObw

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

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

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

https://codepen.io/web-dot-dev/pen/rNEYYVj

الربط على كل من x وy في شريط التمرير

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

تظهر شبكة من المربّعات في شريط تمرير أفقي وعمودي. ويمثل الحد المتقطع المتقطع هدف scrollSnapChange، بينما يكون الحد المتصل هو هدف scrollSnapChange. يمثّل اللون الأحمر snapTargetInline، ويمثّل اللون الأزرق snapTargetBlock.

https://codepen.io/web-dot-dev/pen/qBzVVdp

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

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

https://codepen.io/web-dot-dev/pen/YzoEEXj

أداة اختيار الألوان OKLCH

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

يتم استخدام ScrollSnapChange لمزامنة العنصر الذي تم اقتصاصه مع الحالة بشكل سريع، بينما يتم استخدام scrollSnapChange لتحريك رأس قناة اللون المتأثرة الذي تم تطبيق البيانات التي أدخلها المستخدم عليه.

https://codepen.io/web-dot-dev/pen/OJeOOVG

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

يُحسِّن هذا العرض الترويجي بشكل تدريجي تجربة الانتقال السريع للأسفل أو للأعلى باستخدام الانتقالات التي يتم تشغيلها من خلال النقر على scrollsnapchange.

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

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

https://codepen.io/web-dot-dev/pen/MWMOOae

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

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

https://codepen.io/web-dot-dev/pen/LYKOOpd

عرض الغلاف

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

https://codepen.io/web-dot-dev/pen/Bagmmog

مزيد من الأفكار لإلهام بعض الأفكار الإبداعية

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

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

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

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

المصادر:

• مواصفات CSS
• شرح Snap Snap
• أحداث "الاستجابة السريعة" في شبكة البحث الوصفي
• مجموعة CodePen