خصائص scroll-margin-top في CSS

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

scroll-margin-top 属性指定吸附位置与容器之间的距离。

لتحديد المسافة بين موقف التثبيت والوعاء. scroll-snap-align التثبيت هو موقف العنصر الفرعي في الوعاء عند توقف التمرير. يتم تحديد موقف التثبيت من خلال الخاصية إعداد الخاصية، ولكن قد تتأثر أيضًا بالخصائص والخصائص، ويجب ضبطها في العنصر الفرعي writing-mode الخصائص

التأثير.الاحتياط:

هذا الخاصية يعمل فقط عندما يكون موقف التثبيت في أعلى العنصر الفرعي. scroll-margin-top لرؤية scroll-margin-top والخصائص، ويجب ضبطها في العنصر الفرعي scroll-snap-align الخاصية، ويجب ضبط scroll-snap-type الخاصية.

مثال

مثال 1

ضبط الارتفاع الخارجي للتمرير أعلى بين موقف التثبيت والوعاء هو 20px:

div {
  scroll-margin-top: 20px;
}

تجربة شخصية

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

scroll-margin-top الخاصية يمكن استخدامها في معرض الصور الذي يحتوي على سلوك التثبيت. هنا،scroll-margin-top تخبر المستخدم بأن هناك صورة أعلى. اسحب فوق الصورة الأولى لرؤية التأثير:

#container > img {
  scroll-margin-top: 30px;
}

تجربة شخصية

مثال 3: موقف التثبيت

للحصول على scroll-margin-top الخاصية تعمل، موقف التثبيت يجب أن يكون في أعلى العنصر الفرعي. في هذا المثال،writing-mode الخاصية تغير موقف التثبيت من أعلى العنصر الفرعي إلى اليمين. استخدم هذا الكود،scroll-margin-top الخاصية لم تعد تعمل:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

تجربة شخصية

جافا سكربت:

scroll-margin-top: 0|value|initial|inherit;

قيمة الخاصية

القيمة الوصف
0 الارتفاع الخارجي للتمرير أعلى هو 0. هذا هو القيمة الافتراضية.
length

حدد قيمة الارتفاع الخارجي للتمرير أعلى بالوحدات px،pt،cm وما إلى ذلك. يمكن استخدام القيم السلبية.

انظر إلى:وحدات CSS.
initial ضع هذا الخاصية على قيمتها الافتراضية. انظر إلى: initial.
inherit ينقل هذا الخاصية من عنصر الأب. انظر إلى: inherit.

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

القيمة الافتراضية: 0
التوريث: لا
صنع المتحرك: غير مدعوم. انظر إلى:خصائص المتحرك.
الإصدار: CSS3
جافا سكربت: object.style.scrollMarginTop="20px"

دعم المتصفح

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

كروم إدج فايرفوكس سفاري أوبرا
69.0 79.0 68.0 14.1 56.0

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

المرجع:خصائص direction CSS

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

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

المرجع:خصائص writing-mode في CSS