خصائص scroll-snap-type CSS

التعريف والاستخدام

scroll-snap-type يحدد الخصائص كيفية إلتصاق العنصر بالتركيز عند توقف الدوران وكيفية إلتصاقه بالاتجاه.

لتحقيق سلوك اللف المثبت، يجب تعيين الخاصية في العنصر الوالد. scroll-snap-type الخاصية، وفي العناصر الفرعية scroll-snap-align الخاصية.

مثال

مثال 1

تعيين وظيفة اللف المثبت في المحور x:

#container {
  scroll-snap-type: x mandatory;
}

جرب بنفسك

مثال 2: تعيين سلوك اللف المثبت في المحور x والمحور y

يتم تعيين اللف المثبت في المحور x والمحور y scroll-snap-type الخاصية:

#container > div {
  scroll-snap-type: كل منهما mandatory;
}





جرب بنفسك

مثال 3: سلوك اللف المثبت مع القرب

في المحور x والمحور y مع سلوك قربي scroll-snap-type الخاصية. عند استخدام هذه القيمة في حالة توقف عملية اللف في منتصف بين عناصرين، لن يتم اللف المثبت:

#container > div {
  scroll-snap-type: كل منهما proximity;
}





جرب بنفسك

نص CSS

scroll-snap-type: none|x|y|block|inline|كل منهما|mandatory|proximity|القيمة الافتراضية|التوريث;

قيمة الخاصية

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

مثل mandatory، ولكن ليس بقدر صرامة.

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

يعتمد على المعلمات المتصفح.
القيمة الافتراضية يرجى تعيين هذا الخاصية إلى قيمتها الافتراضية. يرجى الرجوع إلى القيمة الافتراضية.
التوريث ينقل هذا الخاصية من عنصر الوالد إليه. يرجى الرجوع إلى التوريث.

تفاصيل التقنية

القيمة الافتراضية: لا شيء
التوريث: لا
صنع الحركة: غير مدعوم. يرجى الرجوع إلى:خصائص متعلقة بالتحرك بالحركة.
الإصدار: CSS3
نص JavaScript: object.style.scrollSnapType="x mandatory"

دعم المتصفح

الارقام في الجدول تعبر عن إصدار المتصفح الذي يدعم الخاصية لأول مرة.

الكلور القوس الفاكس السفاري الاوبرا
69.0 79.0 99.0 11.0 56.0

الصفحات ذات الصلة

المرجع:خصائص scroll-snap-align CSS