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

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

Adam Argyle

Kaan Alsan

Yi Gu

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

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

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

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

الخلفية

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

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

• يُمنع مواضع التمرير غير المحرجة عند التمرير.
• يخلق تأثير التنقل خلال المحتوى.

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

أوجه القصور

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ملاحظات

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