يمكنك إنشاء تجارب تصفّح مُحكمة من خلال تحديد مواضع التصاق المحتوى أثناء التمرير.
تسمح ميزة CSS Scroll Snap لمطوّري الويب بإنشاء تجارب تنقّل يتم التحكّم فيها جيدًا من خلال تحديد مواضع قفزات التنقّل. وهما مثالان شائعان على ذلك. توفّر ميزة "التمرير السريع" في CSS واجهة برمجة تطبيقات سهلة الاستخدام ومتسقة ل إنشاء أنماط تجربة المستخدم الشائعة هذه.
الخلفية
مزايا ميزة "التمرير السريع"
التمرير هو طريقة شائعة وطبيعية للتفاعل مع المحتوى على الويب. وهو الوسيلة الأصلية للمنصة لتوفير إمكانية الوصول إلى معلومات أكثر مما هو مرئي على الشاشة في الوقت نفسه، ما يصبح مهمًا بشكل خاص على المنصات المتوافقة مع الأجهزة الجوّالة التي تتضمّن مساحة عرض محدودة على الشاشة. لذلك، ليس من المستغرب أن يفضّل مؤلفو الويب بشكل متزايد تنظيم المحتوى في قوائم مسطّحة قابلة للتنقّل بدلاً من تصاميم هرمية عميقة.
يتمثل العيب الرئيسي في الانتقال للأعلى أو للأسفل في عدم دقته. نادرًا ما ينتهي التمرير بالمحاذاة مع فقرة أو جملة. ويظهر ذلك بشكلٍ أكبر في المحتوى المُقسّم إلى صفحات أو المُدرَج مع حدود واضحة عندما تنتهي عملية التمرير في منتصف الصفحة أو الصورة، ما يتركها مرئية جزئيًا. تستفيد حالات الاستخدام هذه من تجربة تنقّل يتم التحكّم فيها جيدًا.
لطالما اعتمد مطوّرو الويب على حلول مستندة إلى JavaScript للتحكّم في التمرير للمساعدة في معالجة هذا النقص. ومع ذلك، لا توفّر الحلول المستندة إلى JavaScript حلًا كاملاً للدقة بسبب عدم توفّر عناصر أساسية لتخصيص عملية التمرير أو الوصول إلى عملية التمرير المجمّعة. تضمن ميزة "الانتقال السريع للأعلى أو للأسفل" في CSS حلًا سريعًا وسهل الاستخدام ودقيقًا يعمل باستمرار على جميع المتصفّحات.
تتيح ميزة "التنقّل السريع" في CSS لمؤلفي الويب وضع حدود لعمليات التنقّل التي يجب أن تنتهي عندها في كل حاوية تنقّل. بعد ذلك، تختار المتصفّحات موضع النهاية الأكثر ملاءمةً استنادًا إلى تفاصيل عملية التمرير، وتنسيق حاوية التمرير ومستوى ظهورها، وتفاصيل مواضع التصاق العناصر، ثم تنتقل إليها بسلاسة باستخدام مؤثرات متحركة. بالعودة إلى المثال السابق، عندما ينتهي المستخدم من الانتقال إلى أعلى أو أسفل لوحة العرض الدوّارة، تظهر الصورة المرئية في مكانها. لا حاجة إلى تعديلات في JavaScript لعرض المحتوى في أعلى الصفحة أو أسفلها.
CSS Scroll Snap
"التمرير السريع" هو عملية ضبط إزاحة التمرير في حاوية التمرير ليكون في موضع snap مفضّل بعد انتهاء عملية التمرير.
يمكن تفعيل ميزة "الانتقال السريع" في حاوية التمرير باستخدام السمة
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 Scrolling API
تحدث ميزة "الانتقال السريع" بعد جميع عمليات الانتقال، بما في ذلك تلك التي يتم بدؤها من خلال نص برمجي. عند استخدام واجهات برمجة تطبيقات مثل 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، بما في ذلك:
- مدى توفّر واجهة برمجة التطبيقات وتوافقها مع جميع المتصفحات
- العمل على تطوير
واجهات برمجة تطبيقات CSS جديدة، مثل
scroll-start - العمل على
أحداث JS الجديدة مثل
snapChanged()