خصائص scroll-padding CSS

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

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

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

الإلتصاق بالموقع هو الموقع الذي يلتصق به العنصر الفرعي عند توقف التمرير في الداخل.

scroll-padding الخصائص هي اختصارات للخصائص التالية:

scroll-padding يمكن تعيين قيم الخصائص بطرق مختلفة:

إذا كان لديك أربعة قيم لـ scroll-padding:

scroll-padding: 15px 30px 60px 90px;
  • الطول من الأعلى هو 15 بكسل
  • الطول من اليمين هو 30 بكسل
  • الطول من الأسفل هو 60 بكسل
  • الطول من اليسار هو 90 بكسل

إذا كان لديك ثلاثة قيم لـ scroll-padding:

scroll-padding: 15px 30px 60px;
  • الطول من الأعلى هو 15 بكسل
  • المسافات إلى اليسار واليمين هي 30px
  • الطول من الأسفل هو 60 بكسل

إذا كان لديك قيمةين لـ scroll-padding:

scroll-padding: 15px 30px;
  • الطول من الأعلى والأسفل هو 15 بكسل
  • المسافات إلى اليسار واليمين هي 30px

إذا كان لدي خاصية scroll-padding قيمة واحدة:

scroll-padding: 10px;
  • المسافات في جميع الأربعة اتجاهات هي 10px

لرؤية scroll-padding الخصائص في العنصر الابن scroll-snap-align الخصائص، ويجب ضبط scroll-padding و scroll-snap-type الخصائص.

ملاحظة:في المثال التالي، تم ضبط الهوامش الداخلية للتمرير في جميع الجوانب، ولكن scroll-snap-align ضبطه إلى "start"، لذا تغير فقط الهوامش الداخلية للتمرير في الجانب العلوي سلوك التمرير.

مثال

مثال 1

ضبط الهوامش الداخلية للتمرير من العنصر إلى الموقع المثبت إلى 20px:

div {
  scroll-padding: 20px;
}

تجربة شخصية

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

scroll-padding يمكن استخدام الخصائص في الصور المعززة بالجاذبية لتجعل الصور تنحدر تحت العنصر الثابت:

#container {
  scroll-padding: 30px 0 0 0;
}
العنصر القابع في القمة
بكينغ رقص ووهان زنبق هانغتشو

تجربة شخصية

مثال 3: ضبط الهوامش الداخلية للتمرير في القاع والجانب الأيمن

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

#container {
  scroll-padding: 0 10px 30px 0;
}





تجربة شخصية

قواعد اللغة CSS

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

قيمة الخاصية

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

تحديد الهوامش الداخلية باستخدام وحدات مثل px،pt،cm إلخ.

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

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

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

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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

المرجع:خصائص scroll-padding-bottom CSS

المرجع:خصائص scroll-padding-left CSS

المرجع:خصائص scroll-padding-right CSS

المرجع:خصائص scroll-padding-top CSS

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

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