مقدمة إلى CSS Scroll Snap Points

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

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

ومع ذلك ، عندما يتعلق الأمر بالارتباط بين الترميز والتمرير, يبدو أن JavaScript فقط لديه أي قدر من التحكم في الأخير. كان هذا لفترة طويلة من الزمن ، ولكن مع مقدمة من التمرير نقاط مبكرة, بدأ المغلق اللحاق بالركب.

التمرير دون التمرير نقاط مبكرة

عادةً ، لا نقوم بالتمرير ببطء شديد ، خاصة على الهواتف. كلما زادت سرعة التمرير ، قلت قدرتك على التحكم حيث على الشاشة سوف ينتهي بك الأمر عندما توقفت عن التمرير.

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

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

التمرير مع التمرير نقطة مبكرة

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

هناك خمس خصائص CSS التي تشكل هذا المعيار:

1. انتقل المفاجئة من نوع
2. انتقل المفاجئة نقاط السينية
3. انتقل المفاجئة نقاط ذ
4. انتقل المفاجئة الإحداثي
5. انتقل المفاجئة الوجهة

دعم المتصفح

الخصائص بحاجة إلى -بكت و -الآنسة البادئات للمتصفحات ذات الصلة. حتى كتابة هذه المقالة ، لا يتم دعم أداة تمرير CSS scroll في Chrome و Opera.

لاحظ أنه من المحتمل أن يتم إسقاط الخصائص الأربعة الأخيرة بواسطة وكلاء المستخدم في المستقبل القريب. في حين أن, خصائص جديدة, أي انتقل المفاجئة محاذاة, انتقل المفاجئة الهامش, و انتقل المفاجئة والحشو, قد يتم إنشاؤه, كما هو محدد في هذه المواصفات.

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

الخصائص

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

1. إلزامي - عند الانتهاء من التمرير ، سوف التمرير المفاجئة عند نقطة المفاجئة ذات الصلة
2. قرب - أقل صرامة من إلزامي. ستكون تعتمد على حكم UA ما إذا كان العنصر سوف يستقر عند نقطة مبكرة معينة
3. لا شيء - لا العض هو القيام به

ال انتقل المفاجئة نقاط السينية و انتقل المفاجئة نقاط ذ الخصائص تنتمي إلى حاوية التمرير, جدا. يشيرون إلى نقاط على المحور السيني والصادي حيث توجد نقاط الانجذاب. قيمتها هي التي قدمها كرر() وظيفة. على سبيل المثال ، إذا كنت ترغب في إضافة نقاط مبكرة على طول المحور السيني في الفترة الفاصلة لـ 100px تحتاج إلى استخدام scroll-snap-points-x: التكرار (100 بكسل) قاعدة.

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

يمكنك استعمال ال انتقل المفاجئة الإحداثي الملكية بالتزامن مع انتقل المفاجئة الوجهة. تحتاج إلى إضافته إلى العناصر الفرعية للحاوية. هذا يحدد إحداثيات العناصر الفرعية, التي تتماشى مع إحداثيات الوجهة من حاوية التمرير الخاصة بهم عندما يقوم المستخدم بالتمرير الشاشة.

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

مثال رمز

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

 div عرض: 300 بكسل ؛ الارتفاع: 300 بكسل ؛ overflow: auto؛… div> img width: 250px؛ الارتفاع: 150 بكسل ؛ ... 

الآن نحن إضافة بعض النقاط المفاجئة إلى حاوية التمرير:

 div عرض: 300 بكسل ؛ تجاوز السعة: السيارات ؛ scroll-snap-points-y: تكرار (150 بكسل) ؛ scroll-snap-type: إلزامي ؛  

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