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

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

Adam Argyle

Kaan Alsan

Yi Gu

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

التوافقية

تدعم العديد من المتصفحات استخدامًا أساسيًا لـ CSS Scroll Snap. راجع القسم هل يمكنني استخدام لقطة التمرير في CSS؟ للحصول على مزيد من المعلومات.

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

الخلفية

محاذاة صفحات CSS

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

• لمنع مواضع التمرير المحرجة عند التمرير.
• ينشئ تأثير التنقّل بين الصفحات في المحتوى.

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

مثال على عجلة التمرير في CSS. في نهاية التمرير، تتم محاذاة المركز الأفقي للصورة مع المركز الأفقي لحاوية التمرير.

أوجه القصور

يتم فقدان مواضع الالتقاط عند تغيير حجم النافذة.

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

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

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

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

دعم مضمَّن لإعادة التقاط الصورة بعد تغيير التنسيق في Chrome 81

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

تم فقدان موضع الالتقاط.

إنّ تدوير الجهاز لا يؤدي إلى الحفاظ على مواضع الانطباق في Chrome 80. بعد الانتقال إلى الشريحة التي تشير إلى NOPE وتغيير اتجاه الجهاز من "عمودي" إلى أفقي، تظهر شاشة فارغة تشير إلى أنّه تم فقد موضع انطباق التمرير.

تم الحفاظ على موضع الالتقاط.

يحافظ تدوير الجهاز على مواضع الانطباق في Chrome 81. ويتم عرض الشريحة التي تشير إلى NOPE على الرغم من تغيُّر اتجاه الجهاز عدة مرات.

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

تنبيه: يتم تنفيذ الالتقاط أيضًا عند تحميل الصفحة. يؤثر هذا في إزاحة التمرير الأولية لبرامج التمرير التي تستخدم ميزة محاذاة التمرير.

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

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

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

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

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

تؤدي إضافة رسالة جديدة إلى إعادة التقاط رسالة جديدة، ما يؤدي إلى تثبيتها في أسفل الشاشة في الإصدار 81 من Chrome.

العمل المستقبلي

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

إضافة ملاحظات

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