خصائص scroll-padding-block-start في CSS

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

scroll-padding-block-start يحدد هذا الخصائص المسافة من بداية الصندوق إلى موقف اللصق للعنصر الفرعي في اتجاه الكتلة.

هذا يعني، عند توقفك عن التمرير، سيتم تعديل التمرير بسرعة، وسيتم التوقف في مسافة محددة بين موقف اللصق والصندوق.

اتجاه الكتلة هو موقف النسخ التالي بالنسبة للسطر الحالي، والاتجاه الذي يتم فيه وضع السطر التالي. هذا أيضًا طريقة ترتيب العناصر التي لها CSS display: block; مثل علامات <p> و<div> في الصفحة. يعتمد اتجاه الكتلة على لغة الكتابة، على سبيل المثال، تبدأ السطور الجديدة في اللغة المونغولية من اليسار إلى اليمين، لذا فإن اتجاه الكتلة هو من اليسار إلى اليمين، بينما يكون اتجاه الكتلة في الصفحة الإنجليزية نحو الأسفل. writing-mode لفعالته.

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

ملاحظة:هذه الخاصية تعمل فقط في الاتجاه السفلي scroll-snap-align إلى 'start'.

لرؤية تأثيرها، يجب تعيين الخاصية scroll-padding-block-start على العنصر الأب، يجب تعيين الخاصية scroll-snap-align عندما يتم تعيين الخاصية scroll-padding-block-start و scroll-snap-type الخاصية.

مثال

مثال 1

ضبط الهوامش الداخلية للتمرير بالاتجاه السفلي من بداية الحاوية إلى موقف الالتصاق بالاتجاه السفلي إلى 20px:

div {
  scroll-padding-block-start: 20px;
}

تجربة شخصية

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

في غاليري الصور التي تملك سلوك الالتصاق، يمكن استخدام scroll-padding-block-start يضيف الصورة إلى العنصر الثابت أدناه:

#container {
  scroll-padding-block-start: 30px;
}

تجربة شخصية

مثال 3

عندما يكون عنصر الحاوية: writing-mode عندما يتم تعيين قيمة الخاصية إلى vertical-rl، يتم تحريك موقع البداية للقناة السفلية للعناصر من أعلى إلى اليمين. هذا يؤثر على سلوك الالتصاق أثناء التمرير، scroll-padding-block-start طريقة عمل الخاصية:

#container {
  scroll-padding-block-start: 20px;
  writing-mode: vertical-rl;
}

تجربة شخصية

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

scroll-padding-block-start: auto|value|initial|inherit;

قيمة الخاصية

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

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

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

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

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

دعم المتصفح

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

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

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

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

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

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