التمرير المتحكم جيدًا باستخدام CSS Scroll Snap

يمكنك إنشاء تجارب تصفّح مُحكمة من خلال تحديد مواضع التصاق المحتوى أثناء التمرير.

Robert Flack

Majid Valipour

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

الخلفية

مزايا ميزة "الانتقال السريع"

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

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

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

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

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

محاذاة التمرير هي عملية ضبط إزاحة التمرير لحاوية التمرير لتكون في موضع محاذاة مفضّل عند انتهاء عملية التمرير.

يمكن تفعيل ميزة محاذاة التمرير في حاوية تمرير باستخدام السمة scroll-snap-type. حيث يخبر هذا المتصفح أنه يجب أن يفكر في التقاط حاوية التمرير هذه إلى مواضع المحاذاة التي تنتجها العناصر التابعة لها. وتحدّد السمة scroll-snap-type المحور الذي يتم الانتقال إليه عند التمرير: x أو y أو both، وتشدّد المحاذاة: mandatory أو proximity. سنعرّفك على المزيد حول هذه المواضيع لاحقًا.

ويمكن إنشاء موضع محاذاة من خلال الإعلان عن المحاذاة المطلوبة على أحد العناصر. هذا الموضع هو إزاحة التمرير التي تتم فيها محاذاة حاوية تمرير الأصل الأقرب والعنصر كما هو محدد للمحور المحدد. يمكن استخدام المحاذاة التالية على كل محور: start وend وcenter.

تعني المحاذاة start أنّه يجب محاذاة حافة بداية إطار محاذاة العنصر مع حافة بداية منطقة محاذاة العنصر. وبالمثل، تعني المحاذاة end وcenter أن حافة أو وسط حاوية التمرير يجب أن يتم محاذاة أو وسطها مع حافة نهاية منطقة محاذاة العنصر أو وسطها.

توضح الأمثلة التالية كيفية استخدام هذه المفاهيم.

مثال: معرض أفقي

من حالات الاستخدام الشائعة لميزة "التمرير السريع" العرض الدوار للصور. على سبيل المثال، لإنشاء رفّ دوار أفقي للصور يستقر على كل صورة أثناء الانتقال للأعلى أو للأسفل، يمكننا تحديد حاوية الانتقال لتكون لها قيمة scroll-snap-type إلزامية على المحور الأفقي. اضبط كل صورة على scroll-snap-align: center لضمان أن يؤدي التثبيت إلى وضع الصورة في منتصف الرفّ الدائري.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

<div id="gallery">
  <img src="cat.jpg">
  <img src="dog.jpg">
  <img src="another_cute_animal.jpg">
</div>

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

مثال: صفحة منتج أثناء التنقّل

ومن الحالات الشائعة الأخرى التي يمكن أن تستفيد من ميزة "التمرير السريع" هي الصفحات التي تحتوي على أقسام منطقية متعددة للتمرير عموديًا فيها، مثل صفحة منتج نموذجية. تُعد scroll-snap-type: y proximity; مناسبة أكثر للحالات مثل هذه. ولا يتداخل عندما يقوم المستخدم بالتمرير إلى منتصف قسم معين، ولكنه ينجذب أيضًا إلى قسم جديد عند التمرير قريبًا.

إليك كيفية تحقيق ذلك:

article {
  scroll-snap-type: y proximity;
  /* Reserve space for header plus some extra space for sneak peeking. */
  scroll-padding-top: 15vh;
  overflow-y: scroll;
}
section {
  /* Snap align start. */
  scroll-snap-align: start;
}
header {
  position: fixed;
  height: 10vh;
}

<article>
  <header> Header </header>
  <section> Section One </section>
  <section> Section Two </section>
  <section> Section Three </section>
</article>

المساحة المتروكة والهامش للتمرير

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

السمة scroll-padding هي سمة جديدة في css يمكن استخدامها لضبط المنطقة القابلة للعرض الفعّالة لحاوية التمرير أو لقطة شاشة سريعة، وتُستخدَم عند احتساب محاذاة محاذاة التمرير. تحدِّد السمة مساحة مُدمجة بجانب مربّع الحشو في حاوية التمرير. في مثالنا، تمت إضافة 15vh عنصر مُدمَج إضافي إلى أعلى الصفحة، ما يوجّه المتصفّح إلى اختيار موضع أقل، 15vh أسفل الحافة العلوية لحاوية التمرير، كحافة البداية العمودية لميزة التمرير السريع. عند المحاذاة، تتداخل حافة بداية عنصر استهداف المحاذاة مع هذا الموضع الجديد، وبالتالي تترك مسافة في الأعلى.

تحدِّد السمة scroll-margin مقدار البداية المستخدَم لتعديل المربّع الفعال لهدف التمرير السريع، تمامًا مثل طريقة عمل scroll-padding في حاوية التمرير السريع.

ربما لاحظت أنّ هاتين السمتَين لا تتضمّنان الكلمة "snap". وهذا إجراء مقصود لأنّه يُعدّل المربّع لجميع عمليات التمرير ذات الصلة وليس فقط لميزة "التمرير السريع". على سبيل المثال، يأخذ Chrome هذه العوامل في الاعتبار عند احتساب حجم الصفحة لعمليات الانتقال بين الصفحات، مثل PageDown وPageUp، وكذلك عند احتساب مقدار الانتقال في عملية Element.scrollIntoView().

التفاعل مع واجهات برمجة التطبيقات الأخرى للتمرير

واجهة برمجة تطبيقات التمرير في DOM

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

التمرير السلس

يتحكّم التمرير السلس في طريقة عمل عملية الانتقال الآلية، بينما تحدّد المحاذاة عند التمرير وجهتها. نظرًا لأنها تتحكم في الجوانب المتعامدة من التمرير، يمكن استخدامها معًا وتتكامل مع بعضها البعض.

سلوك التمرير الزائد

واجهة برمجة تطبيقات سلوك التمرير فوق الحد تتحكّم في كيفية تسلسل التمرير بين عناصر متعددة ولا تتأثر بمحاذاة التمرير.

التحذيرات وأفضل الممارسات

تجنب استخدام المحاذاة الإلزامية عندما تكون العناصر المستهدفة متباعدة على نطاق واسع. وقد يتسبب ذلك في تعذُّر الوصول إلى المحتوى الواقع بين مواضع المحاذاة.

في كثير من الحالات، يمكن إضافة ميزة "الانتقال السريع للأسفل أو للأعلى" كميزة تحسين بدون الحاجة إلى رصد العناصر. استخدِم @supports أو CSS.supports لرصد مدى توفّر ميزة "التنقّل السريع" في CSS، إذا لزم الأمر. تجنَّب استخدام السمة scroll-snap-type المتوفّرة أيضًا في المواصفات التي تم إيقافها نهائيًا.

رصد العناصر في CSS

@supports (scroll-snap-align: start) {
  article {
    scroll-snap-type: y proximity;
    scroll-padding-top: 15vh;
    overflow-y: scroll;
  }
}

رصد الميزات في JavaScript

if (CSS.supports('scroll-snap-align: start')) {
  // use css scroll snap
} else {
  // use fallback
}

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

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

كانت تجربة الانتقال إلى الأسفل أو للأعلى هي محور استطلاع حديث أجراه فريق Chrome. حدّدت نتائج الاستطلاع عدة مجالات تحتاج إلى عمل إضافي لتقليص الفجوة بين مكتبات المكوّنات الإضافية وCSS. سيتركز العمل القادم على scroll-snap، بما في ذلك:

1. مدى توفّر واجهة برمجة التطبيقات وتوافقها مع جميع المتصفحات
2. يمكنك العمل على واجهات برمجة تطبيقات CSS جديدة مثل scroll-start.
3. العمل على أحداث JS الجديدة مثل snapChanged()