خصائص scroll-padding-left لـ CSS

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

scroll-padding-left الخصائص تحدد المسافة من الجانب الأيسر للحاوية إلى موضع اللصق للعنصر.

يُعتبر موضع اللصق هو الموضع الذي يتم فيه لصق العنصر الفرعي داخل الحاوية عند توقف الدوران.

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

النصيحة:هذا الخصائص صالح فقط عندما يتم ضبط موضع اللصق في اليسار من العنصر الفرعي.

لرؤية scroll-padding-left الخاصية في العنصر الأم، يجب إعداد scroll-snap-align الخاصية، وإعداد scroll-padding-left و scroll-snap-type الخاصية.

مثال

مثال 1

أعد تعيين الحافز الداخلي إلى 20px من اليسار إلى الموقع اللصق في المحcontainer:

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

تجربة شخصية

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

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

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

تجربة شخصية

مثال 3: إعداد الحافز الداخلي في اليسار

عندما يتم تعيين سلوك اللصق في كلا الاتجاهين، يمكنك أيضًا تعيين scroll-padding-left الخاصية. اضغط على العنصر التالي للنقر على الرول لتشاهد التأثير:

#container > div {
  scroll-padding-left: 30px;
}

تجربة شخصية

مثال 4: موقع اللصق

للحصول على scroll-padding-left الخاصية تعمل، يجب إعداد الموقع اللصق في اليسار من العنصر الفرعي. في هذا المثال،direction قيمة الخاصية 'rtl' ستجعل الموقع من اليسار إلى اليمين في العنصر الفرعي. عند استخدام هذا الكود،scroll-padding-left الخاصية لم تعد تعمل:

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

تجربة شخصية

جافا سكربت لغة

scroll-padding-left: auto|value|initial|inherit;

قيمة الخاصية

القيمة الوصف
auto القيمة الافتراضية. يحدد المتصفح الحافز الداخلي.
length

تحديد scroll-padding-left بالوحدات px،pt،cm إلخ.

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

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

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

دعم المتصفح

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

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

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

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

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

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

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