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

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 أثناء التنقّل في الشبكة. يوضّح هذا العرض التوضيحي كيف أنّ العنصر الذي ينقر عليه المتصفّح قد لا يكون دائمًا هو العنصر الذي تتوقّعه.

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

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

شريطَا تمرير مرتبطَين

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

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

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

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

يتم استخدام scrollSnapChanging لمزامنة العنصر المُلصق مع الحالة بشكلٍ سريع، في حين يتم استخدام 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

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

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

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

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

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

المصادر:

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