Mfano wa CSS scroll-padding-top

Mifano na matumizi

scroll-padding-top Mfano unaangazia umeki wa kuingizwa kutoka juu ya kikombe hadi eneo la kuingizwa la mbinu wa msingi.

Mwongozo wa kuingizwa ni eneo la kuingizwa kwa kumaliza kusoma, mbinu wa msingi hauonekani katika kikombe.

吸附位置由 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction 和 writing-mode 的影响。

注意：此属性仅在吸附位置设置在子元素顶部时有效。

要看到 scroll-padding-top 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding-top 和 scroll-snap-type 属性。

实例

例子 1

将滚动内边距设置为从容器顶部到吸附位置的距离为 20px：

div {
  scroll-padding-top: 20px;
}

Inafikia kwa kufanyia mafanikio

例子 2：图片库

scroll-padding-top 属性可用于具有吸附行为的图片画廊，以将图片推到固定元素下方：

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

Inafikia kwa kufanyia mafanikio

例子 3：在顶部设置滚动内边距

当在两个方向上都设置了吸附行为时，也可以在容器上设置 scroll-padding-top 属性。垂直滚动到下一个元素以查看效果：

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

Inafikia kwa kufanyia mafanikio

例子 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;
}

Inafikia kwa kufanyia mafanikio

Inayotumiwa kwa Kigeni mtaani:

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

Thamani ya kina msingi

Maelezo ya teknolojia

Mfano wa kusoma kwa programu

Jifunze namba za kina msingi kwa programu ya kusoma kwa sababu ya hili kina msingi.

相关页面

参考：Mfano wa CSS direction

参考：Mfano wa CSS scroll-snap-align

参考：Mfano wa CSS scroll-snap-type

参考：Hisia writing-mode