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

నిర్వచనం మరియు ఉపయోగం

scroll-padding-inline అమర్తకం సెట్ చేస్తుంది పదునైన దిశలో కంటైనర్ నుండి సిబ్బంది అంశం స్థానానికి దూరం.

ఇది అర్థం వహిస్తుంది మీరు స్క్రాల్ చేసినప్పుడు స్టాప్ చేసినప్పుడు, స్క్రాల్ వేగంగా సర్జించబడుతుంది మరియు అద్దె స్థానం మరియు కంటైనర్ మధ్య సెట్ చేసిన దూరంలో స్టాప్ చేస్తుంది。

పదునైన దిశ అనేది ఒక పదునైన సారికి సంబంధించిన స్థానాన్ని సూచిస్తుంది మరియు తదుపరి అక్షరం చేరుతుంది దిశ అని అర్థం వహిస్తుంది. ఇది CSS display: inline; కి కలిగిన టాగ్లు (ఉదా. <a> మరియు <strong> టాగ్లు) పదబంధంలో యొక్క సంరచన రీతు అని అర్థం వహిస్తుంది. పదునైన దిశ అనేది లిపి భాషకి అనుసరించబడుతుంది, ఉదా. అరబీ కొత్త అక్షరాలు కుడి నుండి ఎడమకు వరుసగా ఉంటాయి, అనేకానేకాను పదునైన దిశ కుడి నుండి ఎడమకు ఉంటుంది, అండర్ ఇంగ్లీష్ పేజీలు ఎడమ నుండి కుడికి ఉంటాయి. పదునైన దిశ అనేది CSS అమర్తకం ద్వారా నిర్వచించబడవచ్చు: direction 和 writing-mode నిర్వచించడానికి ఉపయోగిస్తారు。

అద్దె స్థానం అనేది మీరు స్క్రాల్ చేసినప్పుడు స్టాప్ చేసినప్పుడు సిబ్బంది అంశం లో అద్దె స్థానం చేరుతుంది అని అర్థం వహిస్తుంది。

గమనిక:ఈ అమర్తకం మాత్రమే పదునైన దిశలో ఉంటుందిscroll-snap-align అమర్తకం విలువలను 'start' లేదా 'end' గా సెట్ చేసినప్పుడు మాత్రమే ప్రభావం చూపుతుంది。

scroll-padding-inline అమర్తకం క్రింది అమర్తకాల లఘువు ఉంది:

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline అమర్తకం విలువలను వివిధ రీతుల్లో సెట్ చేయవచ్చు:

స్క్రాల్ ప్యాడింగ్ ఇన్లైన్ అమర్తకం విలువలు రెండు ఉన్నప్పుడు ఉంటుంది:

scroll-padding-inline: 10px 50px;

• ప్రారంభ దూరం 10px ఉంటుంది
• ముగింపు దూరం 50px ఉంటుంది

స్క్రాల్ ప్యాడింగ్ ఇన్లైన్ అమర్తకం విలువ ఉన్నప్పుడు ఉంటుంది:

scroll-padding-inline: 10px;

• ప్రారంభం మరియు ముగింపు దూరం మొత్తం 10px ఉంటాయి

చూడటానికి వీలు ఉంటుంది scroll-padding-inline అమర్తకం యొక్క ప్రభావాన్ని ప్రదర్శించడానికి మరియు సిబ్బంది అంశం మీద సెట్ చేయడం అవసరం scroll-snap-align అమర్తకం ను సెట్ చేయడానికి ప్రాతిపదికగా పెరిగిన అంశం మీద సెట్ చేయబడుతుంది scroll-padding-inline 和 scroll-snap-type అమర్తకం。

CSS యొక్క scroll-padding-block 和 scroll-padding-inline అమర్తకం మరియు CSS అమర్తకం CSS స్క్రోల్-ప్యాడింగ్-టాప్ అట్రిబ్యూట్、scroll-padding-bottom、scroll-padding-left 和 scroll-padding-right 非常相似，但 scroll-padding-block 和 scroll-padding-inline 属性依赖于块方向和行内方向。

实例

例子 1

设置行内方向上的滚动内边距，从容器到吸附位置为 20px：

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

亲自试一试

例子 2：图片库

在具有吸附行为的图片画廊中，可以使用 scroll-padding-inline 属性将图片从固定元素后面推出：

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

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 'vertical-rl' 时，行内方向上的容器和子元素的起始位置从左侧移动到顶部，结束位置从右侧移动到底部。这会影响滚动吸附行为以及 scroll-padding-inline 属性的工作方式：

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

亲自试一试

例子 4

当容器元素的 direction 属性值设置为 'rtl' 时，行内方向上的容器和子元素的起始位置从右侧移动到左侧。这会影响滚动吸附行为以及 scroll-padding-inline 属性的工作方式：

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

亲自试一试

CSS 语法

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

属性值

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

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

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

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

పరిశీలనకు:CSS డిరెక్షన్ అట్రిబ్యూట్

పరిశీలనకు:CSS స్క్రోల్-స్నాప్-అలయిన్ అట్రిబ్యూట్

పరిశీలనకు:CSS స్క్రోల్-స్నాప్-టైప్ అట్రిబ్యూట్

పరిశీలనకు:CSS వ్రాటింగ్-మోడ్ అట్రిబ్యూట్