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