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

定义和用法

scroll-padding-inline-end 属性指定了从容器末端到子元素对齐位置之间在行内方向上的距离。

这意味着，当你停止滚动时，滚动将快速调整并停止在对齐位置与容器之间指定的距离处。

行内方向是指下一字符相对于现有字符在行中的位置放置的方向，这也是具有 CSS display: inline; 的标签（如 和 标签）在文本中的布局方式。行内方向取决于书写语言，例如阿拉伯语的新字符是从右到左排列的，因此行内方向是从右到左的，而英文页面的行内方向是从左到右的。行内方向可以通过 CSS 属性 direction 和 writing-mode 定义。

对齐位置是指当你停止滚动时，子元素在容器中对齐到位的位置。

注意：ఈ లక్షణం మాత్రమే ఉపయోగించబడుతుంది: scroll-snap-align అంతర్భాగం వినియోగించబడినప్పుడు ప్రభావం చూపుతుంది 'end' స్థాయిలో అనుసంధానించబడిన లక్షణం.

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

实例

例子 1

设置从容器末端到对齐位置的行内方向滚动内边距为 20px：

div {
  scroll-padding-inline-end: 20px;
}

స్వయంగా ప్రయోగించండి

ఉదాహరణ 2: చిత్రాల కొలక్షను

scroll-padding-inline-end సమాంతర ప్రవర్తనను కలిగివున్న చిత్రాల గ్యాలరీలో ఈ లక్షణాన్ని ఉపయోగించవచ్చు, చిత్రాలను నిర్దిష్ట ప్రాంతం నుండి తయారు చేయడానికి:

#container {
  scroll-padding-inline-end: 30px;
}

స్వయంగా ప్రయోగించండి

ఉదాహరణ 3

కంటైనర్ అంతర్గత విద్యాక్రమణ లక్షణం writing-mode లక్షణాన్ని 'vertical-rl' గా సెట్ చేసినప్పుడు, వెలుపలి దిశలో కంటైనర్ మరియు కంటైనర్ పిల్లల ప్రాంతం ఎడమ పక్కనుండి ఉపరితలకు మరియు చివరి ప్రాంతం కుడి పక్కనుండి తలకు కదిలుతుంది. ఇది స్క్రాలింగ్ అయిస్టింగ్ ప్రవర్తనను ప్రభావితం చేస్తుంది మరియు scroll-padding-inline-end లక్షణం పనికి పద్ధతి:

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

స్వయంగా ప్రయోగించండి

ఉదాహరణ 4

కంటైనర్ అంతర్గత విద్యాక్రమణ లక్షణం direction లక్షణాన్ని 'rtl' గా సెట్ చేసినప్పుడు, వెలుపలి దిశలో కంటైనర్ మరియు కంటైనర్ పిల్లల చివరి ప్రాంతం కుడి పక్కనుండి ఎడమ పక్కనుండి కదిలుతుంది. ఇది స్క్రాలింగ్ అయిస్టింగ్ ప్రవర్తనను ప్రభావితం చేస్తుంది మరియు scroll-padding-inline-end లక్షణం పనికి పద్ధతి:

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

స్వయంగా ప్రయోగించండి

CSS సంకేతాలు

scroll-padding-inline-end: auto|value|initial|inherit;

లక్షణాన్ని విలువ

విలువ వివరణ
auto అప్రమేయ విలువ.
length

px, pt, cm వంటి ఏకాంశాలతో scroll-padding-inline-end ను నిర్దేశించండి.

మునుపు విలువలను ఉపయోగించకుండా పరిమితం చేయండి. దయచేసి ఈ లింక్ ను చూడండి:CSS యూనిట్స్.
% సంచరణ ప్రాంతం వెడల్పన శాతం పూర్తిగా పూరించు చేయండి.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. దయచేసి ఈ లింక్ ను చూడండి: initial.
inherit ఈ లక్షణాన్ని తన పేర్పడ్డ మూల మూలకం నుండి పారంతర్యం చేసుకుంటుంది. దయచేసి ఈ లింక్ ను చూడండి: inherit.

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

అప్రమేయ విలువ: auto
పారంతర్యం లక్షణం: సంఖ్యలు లేదు
అనిమేషన్ తయారీ: మద్దతు లేదు. దయచేసి ఈ లింక్ ను చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
వెర్షన్: CSS3
జావాస్క్రిప్ట్ సంకేతాలు: object.style.scrollPaddingInlineEnd="20px"

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

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

క్రోమ్ ఎడ్జ్ ఫైర్‌ఫాక్స్ సఫారీ ఆపెరా
69.0 79.0 68.0 15.0 56.0

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

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

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

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

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