بدءًا من الإصدار 81 من Chrome، لن تحتاج بعد الآن إلى إضافة أدوات معالجة الأحداث لفرض إعادة الالتقاط.
تتيح ميزة CSS Scroll Snap لمطوّري البرامج على الويب إنشاء تجارب تمرير يتم التحكّم فيها جيدًا من خلال الإعلان عن مواضع الانطباق أثناء التنقّل. من عيوب طريقة التنفيذ الحالية أنّ اقتصاص التمرير لا يعمل بشكل جيد عند تغيير التنسيق، مثلاً عند تغيير حجم إطار العرض أو تدوير الجهاز. تم إصلاح هذا القصور في Chrome 81.
التوافقية
تدعم العديد من المتصفحات استخدامًا أساسيًا لـ CSS Scroll Snap. راجع القسم هل يمكنني استخدام لقطة التمرير في CSS؟ للحصول على مزيد من المعلومات.
Chrome هو المتصفّح الوحيد الذي يستخدم حاليًا لقطات التمرير بعد تغييرات التنسيق. لدى Firefox تذكرة مفتوحة لتنفيذ هذا الإجراء، ويحتوي Safari أيضًا على
ticket مفتوحة لإعادة التقاط الصورة بعد تغير محتوى شريط التمرير. في الوقت الحالي، يمكنك محاكاة هذا السلوك عن طريق إضافة الرمز البرمجي التالي إلى أدوات معالجة الأحداث لفرض تنفيذ المحاذاة:
javascript
scroller.scrollBy(0,0);
إلا أنّ هذا لا يضمن رجوع شريط التمرير إلى العنصر نفسه.
الخلفية
محاذاة صفحات CSS
تسمح ميزة CSS Scroll Snap لمطوّري البرامج على الويب بإنشاء تجارب تحكُّم منظَّمة جيدًا من خلال الإعلان عن مواضع انطباق التمرير. وتضمن هذه المواضع محاذاة المحتوى القابل للتمرير بشكل صحيح مع حاويته للتغلب على مشاكل التمرير غير الدقيق. بمعنى آخر، الانتقال السريع:
- لمنع مواضع التمرير المحرجة عند التمرير.
- ينشئ تأثير التنقّل بين الصفحات في المحتوى.
تُعد المقالات المقسّمة إلى صفحات ولوحات العرض الدوّارة للصور حالتَي استخدام شائعتَين للقطات التمرير.
![مثال على محاذاة تمرير CSS](https://web.dev/static/articles/snap-after-layout/image/example-css-scroll-snap-b0e9b651c5dbf.png?authuser=6&hl=ar)
أوجه القصور
يسمح سرعة الانطباق للمستخدمين بالتنقل بسهولة عبر المحتوى، لكن عدم قدرته على التكيف مع التغييرات في المحتوى والتنسيق تحظر بعض فوائده المحتملة. كما هو موضح في المثال أعلاه، على المستخدمين إعادة ضبط مواضع التمرير عند تغيير حجم النافذة للعثور على العنصر الذي تم التقاطه سابقًا. بعض السيناريوهات الشائعة التي تتسبب في تغيير التخطيط هي:
- تغيير حجم نافذة
- تدوير جهاز
- جارٍ فتح "أدوات مطوري البرامج"
السيناريو الأوّلان يجعلان CSS Scroll Snap أقل جاذبية للمستخدمين، والسيناريو الثالث يكون مربكًا للمطوّرين عند تصحيح الأخطاء. على المطوّرين أيضًا مراعاة أوجه القصور هذه عند محاولة تقديم تجربة ديناميكية تتيح إجراءات مثل إضافة محتوى أو إزالته أو نقله.
ويتمثل الحل الشائع لذلك في إضافة مستمعين ينفّذون تمريرًا آليًا عبر JavaScript لفرض التنفيذ، أي عند حدوث أي من تغييرات التنسيق المذكورة. قد لا يكون هذا الحل البديل فعالاً عندما يتوقع المستخدم أن يعود شريط التمرير إلى المحتوى نفسه كما كان في السابق. يبدو أن أي معالجة إضافية لـ JavaScript تؤدي تقريبًا إلى إلغاء الغرض من ميزة CSS هذه.
دعم مضمَّن لإعادة التقاط الصورة بعد تغيير التنسيق في Chrome 81
أوجه القصور المذكورة لم تعد موجودة في Chrome 81: ستظل أدوات التمرير عابرة حتى بعد تغيير التنسيق. سيقومون بإعادة تقييم مواضع التمرير بعد تغيير تخطيطهم، وإعادة المحاذاة إلى أقرب موضع إبزيم إذا لزم الأمر. إذا تم توصيل عارض التمرير مسبقًا إلى عنصر لا يزال موجودًا بعد تغيير التخطيط، فسيحاول التمرير العودة إليه. انتبه لما يحدث عندما يتغير التنسيق في المثال التالي.
NOPE
وتغيير اتجاه الجهاز
من "عمودي" إلى أفقي، تظهر شاشة فارغة تشير إلى أنّه تم فقد موضع انطباق التمرير.
NOPE
على الرغم من تغيُّر اتجاه الجهاز عدة مرات.
راجع مواصفات إعادة الالتقاط بعد تغييرات التنسيق للحصول على مزيد من التفاصيل.
مثال: أشرطة التمرير الثابتة
باستخدام ميزة "Snap بعد تغييرات التنسيق"، يمكن للمطوّرين تنفيذ أشرطة تمرير ثابتة باستخدام بضعة أسطر من CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
هل يهمّك معرفة المزيد من المعلومات؟ راجع واجهة مستخدم المحادثة التجريبية التالية للعناصر المرئية.
العمل المستقبلي
جميع تأثيرات التمرير التي تؤدي إلى إعادة التقاط الصورة فورية، والمتابعة المحتملة هي إتاحة إعادة الالتقاط باستخدام تأثيرات التمرير السلس. راجِع مشكلة المواصفات لمعرفة التفاصيل.
إضافة ملاحظات
ملاحظاتك مهمة جدًا في تحسين تجربة إعادة التقاط الصور بعد تغييرات التنسيق، لذا ندعوك إلى تجربتها وإخبار مهندسي Chromium بآرائك.