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

నిర్వ‌హ‌ణ‌ మ‌రియు వినియోగం

scroll-padding-right అంశం నిర్ణయించబడిన కంటైనర్ కుడి పాటు నుండి కుమార అంశం అంకురం స్థానానికి దూరం నిర్ణయించబడింది‌.

సంచరణ స్థానం అనేది సంచరణను ఆగించినప్పుడు, కుమార అంశం కంటైనర్‌లో అంకురం స్థానం వ‌ద్ద అంకురించే స్థానం అని అర్థం వహిస్తుంది‌.

సంచరణ స్థానం నిర్ణయించబడింది ద్వారా scroll-snap-align అంశం సెట్టింగ్‌, కానీ కూడా CSS అంశం direction 和 writing-mode ప్ర‌భావం‌.

శ్ర‌ద్ధ పెట్టండి‌:此属性仅在吸附位置设置在子元素右侧时有效。

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

实例

例子 1

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

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

亲自试一试

例子 2：图片库

scroll-padding-right 属性可用于具有吸附行为的图片画廊，以将图片从固定元素后面推入视图中：

#container > img {
  scroll-padding-right: 30px;
}

亲自试一试

例子 3：在右侧设置滚动内边距

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

#container > div {
  scroll-padding-right: 30px;
}

亲自试一试

例子 4：吸附位置

要使 scroll-padding-right 属性生效，吸附位置必须设置在子元素的右侧。在此示例中，direction 属性的值 'rtl' 将吸附位置从子元素的右侧更改为左侧。使用这样的代码时，scroll-padding-right 属性将不再起作用：

#container {
  direction: rtl;
  scroll-padding-right: 30px;
}
#container > div {
  scroll-snap-align: none end;
}

亲自试一试

CSS 语法

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

属性值

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

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

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

相关页面

పరిచయం కోసం:CSS డిరెక్షన్ అట్రిబ్యూట్

పరిచయం కోసం:CSS స్క్రోల్-స్నాప్-అలయిన్ అట్రిబ్యూట్

పరిచయం కోసం:CSS స్క్రోల్-స్నాప్-టైప్ అట్రిబ్యూట్

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