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

定义和用法

scroll-padding-bottom 属性指定从容器底部到子元素吸附位置的距离。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。吸附位置通过 على العنصر الأب، يجب ضبط الخاصية 属性设置，但也可能受到 CSS 属性 direction الخاصية، وعند ضبط الخاصية writing-mode 的影响。

ملاحظة:ملاحظة:

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

الخاصية.

مثال

مثال 1

ضبط حشوة التدفق من أسفل العنصر الفرعي إلى موقف اللصق إلى 20px:
  div {
}

تجربة شخصية

scroll-padding-bottom: 20px;

مثال 2: مكتبة الصور scroll-padding-bottom في صالة عرض الصور التي تحتوي على سلوك اللصق، يمكن استخدام

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

تجربة شخصية

الخاصية ستجعل الصورة تنفجر فوق العنصر الثابت:

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

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

تجربة شخصية

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

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

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

تجربة شخصية

جملة CSS

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

قيمة الخاصية

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

دعم المتصفح

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

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

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

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

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

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