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

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

scroll-padding-top الخصائص تُحدد المسافة من قمة الحاوية إلى موقع المُصادم للعنصر الفرعي.

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

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

إعداد خاصيةتأثير هذه الخاصية.

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

الخاصية.

مثال

مثال 1

تعيين边际 الداخلية لتبعد العنصر الفرعي 20px من أعلى العنصر المضيف:
  div {
}

جرب بنفسك

scroll-padding-top: 20px;

scroll-padding-top مثال 2: مكتبة الصور

#container {
  scroll-padding-top: 30px;
}

جرب بنفسك

الخاصية يمكن استخدامها في الصور المعرضة التي تحتوي على سلوك التمسك لتجعل الصور تنقل تحت العنصر الثابت:

مثال 3: تعيين边际 الداخلية في الوجهة العليا scroll-padding-top عندما يتم تعيين سلوك التمسك في اتجاهين مختلفين، يمكن أيضًا تعيين خاصية التمسك في العنصر المضيف.

#container {
  scroll-padding-top: 30px;
}

جرب بنفسك

مثال 4: موقع التمسك

لجعل scroll-padding-top عندما يتم تعيين الخاصية التمسك، يجب أن يتم تعيين موقع التمسك في أعلى العنصر الفرعي. في هذا المثال،writing-mode عندما يتم استخدام هذا الكود، يتم تغيير موقع التمسك من أعلى العنصر الفرعي إلى اليمين. عند استخدام هذه الخاصية،scroll-padding-top الخاصية ستفقد تأثيرها:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

جرب بنفسك

جملة CSS

scroll-padding-top: auto|value|القيمة المبدئية|التوريث;

قيمة الخاصية

القيمة الوصف
القيمة المبدئية القيمة المبدئية. يحدد المتصفح边际 الداخلية.
length

تحديد scroll-padding-top بمقياس px،pt،cm وما إلى ذلك.

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

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

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

دعم المتصفح

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

الخيار النهاية الفايرفوكس السفاري الأوبرا
69.0 79.0 68.0 14.1 56.0

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

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

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

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

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