Hausa: Aini na CSS scroll-padding

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

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

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

الجزء المثبت هو الموقع الذي يصل إليه العنصر الفرعي عند توقف التمرير، حيث يصبح مثبتًا في المحتوى.

scroll-padding الخاصية هي اختصار للعديد من الخاصيات التالية:

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

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

scroll-padding: 15px 30px 60px 90px;
  • الجزء العلوي على بعد 15px
  • الجزء الأيمن على بعد 30px
  • الجزء السفلي على بعد 60px
  • الجزء الأيسر على بعد 90px

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

scroll-padding: 15px 30px 60px;
  • الجزء العلوي على بعد 15px
  • 左侧和右侧距离为 30px
  • الجزء السفلي على بعد 60px

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

scroll-padding: 15px 30px;
  • الجزء العلوي والسفلي على بعد 15px
  • 左侧和右侧距离为 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
JavaScript 语法： object.style.scrollPadding="20px"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

相关页面

参考：Hausa: Aini na CSS scroll-padding-bottom

参考：Hausa: Aini na CSS scroll-padding-left

参考：Hausa: Aini na CSS scroll-padding-right

参考：Hausa: Aini na CSS scroll-padding-top

参考：Hausa: Aini na CSS scroll-snap-align

参考：Hausa: Aini na CSS scroll-snap-type