خصائص scroll-snap-align CSS

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

scroll-snap-align تحدد هذه الخاصية الموضع الذي سيتم فيه تثبيت العنصر عند توقف التمرير.

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

مثال

مثال 1

عند توقف المستخدم عن التمرير، يتم اللصق للعنصر الأقرب في مركز الموقع:

div {
  scroll-snap-align: center;
}

جرب بنفسك

مثال 2: مكتبة صور

scroll-snap-align تتميز الخاصية أيضًا بكونها مناسبة جدًا لاستخدامها في تصفح مكتبة الصور. هنا، اتجاه التمرير هو الأفقي، والطريقة التي يتم فيها اللصق هي في الوسط. عند отпуск كيس التمرير، يتم اللصق للصورة القريبة في منتصف منطقة التمرير. جرب النقر على صورة واحدة، ثم استخدام مفاتيح الأسهم اليمنى واليسرى للتمرير من خلالها:

#container > img {
  scroll-snap-align: none center;
}
بكينغهام رقص ووهان زنبق هانغتشو

جرب بنفسك

bridge alley in jungle mountains man with camera Cinque Terre

مثال 3: لصق المواضع في الاتجاه العمودي

عند التمرير العمودي،scroll-snap-align يمكن أيضًا تعيين الخاصية في بداية العنصر في الاتجاه العمودي:

#container > div {
  scroll-snap-align: start none;
}

جرب بنفسك

نحوية CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

قيمة الخاصية

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

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

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

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

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

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