خصائص scroll-padding-right في CSS

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

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

الموضع الملتصق يشير إلى الموضع الذي يلتصق فيه عنصر الفرع في العنصر الأم عند التوقف عن التدوير.

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

الاحتياط:此属性仅在吸附位置设置在子元素右侧时有效。

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

مثال

مثال 1

ضبط مسافة الداخلية للتمرير لتكون على بعد 20px من الجانب الأيمن من العنصر المضيف:

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

تجربة شخصية

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

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

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

تجربة شخصية

مثال 3: ضبط مسافة الداخلية للتمرير على اليمين

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

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

تجربة شخصية

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

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

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

تجربة شخصية

نحوية CSS

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

قيمة الخاصية

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

تحديد scroll-padding-right بواسطة وحدات مثل px،pt،cm إلخ.

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

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

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

دعم المتصفح

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

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

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

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

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

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

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