خصائص scroll-margin-right CSS

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

scroll-margin-right يحدد الخاصية المسافة بين موقف اللصق والصندوق.

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

ملاحظة:هذا الخاصية تعمل فقط عندما يتم تعيين موقف اللصق على اليمين للعناصر الفرعية.

لرؤية scroll-margin-right التي يجب تعيينها في العنصر الفرعي لرؤية تأثيرها. scroll-margin-right والخصائص scroll-snap-align الخصائص، ويجب تعيين scroll-snap-type الخصائص.

مثال

مثال 1

ضبط موقف اللصق مع الارتفاع الخارجي للتمرير إلى اليمين لـ 20px:

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

جرب بنفسك

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

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

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

جرب بنفسك

مثال 3: موقف اللصق

لجعل scroll-margin-right الخصائص تعمل، يجب تعيين موقف اللصق على اليمين للعناصر الفرعية. في هذا المثال،direction الخصائص تغير موقف اللصق من اليمين إلى اليسار للعناصر الفرعية. باستخدام هذا الكود،scroll-margin-right الخصائص التالية لم تعد تعمل:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-right: 30px;
  scroll-snap-align: none end;
}

جرب بنفسك

صيغة CSS

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

قيمة الخاصية

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

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

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

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

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

دعم المتصفح

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

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

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

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

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

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

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