خصائص scroll-margin-left CSS

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

scroll-margin-left الخصائص تحدد المسافة بين موقف التثبيت والصندوق.

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

التأثير.ملاحظة:

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

مثال

مثال 1

حدد موقف التثبيت مع الارتفاع الخارجي الأيسر للدفع مع الصندوق ب 20px:

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

تجربة شخصية

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

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

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

تجربة شخصية

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

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

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

تجربة شخصية

جملة CSS

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

قيمة الخاصية

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

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

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

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

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

دعم المتصفح

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

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

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

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

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

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

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