محاذاة التمرير بعد تغيير التنسيق

بدءًا من الإصدار 81 من Chrome، لم تعُد بحاجة إلى إضافة مستمعي الأحداث لإجبار عملية إعادة التقاط العناصر.

Adam Argyle

Kaan Alsan

Yi Gu

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

إمكانية التشغيل التفاعلي

تتوافق العديد من المتصفّحات مع ميزة "التمرير السريع" في CSS. يُرجى الاطّلاع على المقالة هل يمكنني استخدام محاذاة شريط التمرير في CSS؟ للحصول على مزيد من المعلومات.

Chrome هو المتصفّح الوحيد الذي ينفّذ ميزة "الانتقال السريع للأسفل أو للأعلى" بعد تغييرات التنسيق. تم تقديم طلب في Firefox لتطبيق هذه الميزة، وتم تقديم طلب أيضًا في Safari لإعادة التقاط المحتوى بعد تغييره في ملف التمرير. في الوقت الحالي، يمكنك محاكاة هذا السلوك عن طريق إضافة الرمز التالي إلى مستمعي الأحداث لفرض تنفيذ عملية التصاق: javascript scroller.scrollBy(0,0); ومع ذلك، لن يضمن ذلك أن يعود شريط التمرير إلى العنصر نفسه.

الخلفية

محاذاة التمرير في CSS

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

• منع ظهور مواضع التمرير غير الملائمة عند التمرير
• تُنشئ تأثير الانتقال من صفحة إلى أخرى في المحتوى.

إنّ المقالات المفصّلة والعروض الدوّارة للصور هما حالتا استخدام شائعتان لميزة "لقطات التمرير".

أوجه القصور

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

• تغيير حجم نافذة
• تدوير جهاز
• فتح "أدوات مطوري البرامج"

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

أحد الحلول الشائعة هو إضافة أدوات معالجة تنفّذ تمريرًا آليًّا عبر JavaScript لفرض الالتقاط ليتم تنفيذه كلما حدث أي من هذه التغييرات المذكورة في التنسيق. قد لا تكون هذه الطريقة البديلّة فعّالة عندما يتوقّع المستخدم أن يعود scrolled إلى المحتوى نفسه كما كان من قبل. ويبدو أنّ أيّ معالجة أخرى باستخدام JavaScript تؤدي إلى إلغاء الغرض من ميزة CSS هذه تقريبًا.

إتاحة إعادة المحاذاة بعد تغييرات التنسيق في Chrome 81

لم تعُد العيوب المذكورة موجودة في الإصدار 81 من Chrome: ستظلّ أشرطة التمرير مُثبَّتة حتى بعد تغيير التنسيق. ستتم إعادة تقييم مواضع التمرير بعد تغيير تنسيقها، وستتم إعادة التثبيت على أقرب موضع تثبيت إذا لزم الأمر. إذا كان تم تثبيت شريط التمرير سابقًا على عنصر لا يزال متوفّرًا بعد تغيير التنسيق، سيحاول شريط التمرير الرجوع إليه. انتبه لما يحدث عند تغيير التنسيق في المثال التالي.

يمكنك الاطلاع على مواصفات إعادة المحاذاة بعد تغيير التنسيق للحصول على مزيد من التفاصيل.

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

باستخدام ميزة "الالتقاط بعد تغييرات التنسيق"، يمكن للمطوّرين تنفيذ أشرطة التمرير الثابتة باستخدام بضع خطوط من CSS:

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

هل يهمّك معرفة المزيد من المعلومات؟ يمكنك الاطّلاع على واجهة مستخدم العرض التوضيحي التالية للاطّلاع على العناصر المرئية.

الإجراءات المستقبلية

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

ملاحظات

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