Hausa: CSS scroll-snap-align hauka

定义和用法

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

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

المرجع:Hausa: CSS scroll-snap-type hauka