CSS స్క్రోల్-ప్యాడింగ్-బోటమ్ అట్రిబ్యూట్

定义和用法

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

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。吸附位置通过 scroll-snap-align 属性设置，但也可能受到 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;

లక్షణ విలువ

సాంకేతిక వివరాలు

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న బ్రౌజర్ సంస్కరణను సూచిస్తాయి。

సంబంధిత పేజీలు

参考：CSS డయరెక్షన్ అట్రిబ్యూట్

参考：CSS స్క్రోల్-స్నాప్-అలయిన్ అట్రిబ్యూట్

参考：CSS స్క్రోల్-స్నాప్-టైప్ అట్రిబ్యూట్

参考：CSS వ్రాయింగ్-మోడ్ అట్రిబ్యూట్