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

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

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

ఇది అర్థం చేసుకుంటే, మీరు స్క్రాల్ చేయడం ముగించినప్పుడు, సమీపించే స్థానం మరియు కంటైనర్ మధ్య తీసుకున్న దూరంలో స్క్రాల్ అధికంగా సరిచేసి అంతిమగా ఆగుతుంది.

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

సమీపించే స్థానం అనేది, మీరు స్క్రాల్ చేయడం ముగించినప్పుడు, కుమార అంశం కంటైనర్ లో సమీపించే స్థానం అని అర్థం చేసుకోవచ్చు.

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

చూడాలి scroll-padding-inline-start అంశం యొక్క ప్రభావాన్ని చూడడానికి, కుమార అంశంపై సెట్ చేయండి scroll-snap-align అంశంపై సెట్ చేయండి scroll-padding-inline-start మరియు scroll-snap-type 属性。

实例

例子 1

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

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

亲自试一试

例子 2：图片库

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

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

亲自试一试

例子 3

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

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

亲自试一试

例子 4

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

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

పరికల్పన:CSS దిరెక్షన్ అట్రిబ్యూట్

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

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

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