CSS స్క్రోల్-ప్యాడింగ్-ఇన్లైన్ అట్రిబ్యూట్
- ముందస్తు పేజీ scroll-padding-bottom
- తదుపరి పేజీ scroll-padding-inline-end
నిర్వచనం మరియు ఉపయోగం
scroll-padding-inline
అమర్తకం సెట్ చేస్తుంది పదునైన దిశలో కంటైనర్ నుండి సిబ్బంది అంశం స్థానానికి దూరం.
ఇది అర్థం వహిస్తుంది మీరు స్క్రాల్ చేసినప్పుడు స్టాప్ చేసినప్పుడు, స్క్రాల్ వేగంగా సర్జించబడుతుంది మరియు అద్దె స్థానం మరియు కంటైనర్ మధ్య సెట్ చేసిన దూరంలో స్టాప్ చేస్తుంది。
పదునైన దిశ అనేది ఒక పదునైన సారికి సంబంధించిన స్థానాన్ని సూచిస్తుంది మరియు తదుపరి అక్షరం చేరుతుంది దిశ అని అర్థం వహిస్తుంది. ఇది CSS display: inline; కి కలిగిన టాగ్లు (ఉదా. <a> మరియు <strong> టాగ్లు) పదబంధంలో యొక్క సంరచన రీతు అని అర్థం వహిస్తుంది. పదునైన దిశ అనేది లిపి భాషకి అనుసరించబడుతుంది, ఉదా. అరబీ కొత్త అక్షరాలు కుడి నుండి ఎడమకు వరుసగా ఉంటాయి, అనేకానేకాను పదునైన దిశ కుడి నుండి ఎడమకు ఉంటుంది, అండర్ ఇంగ్లీష్ పేజీలు ఎడమ నుండి కుడికి ఉంటాయి. పదునైన దిశ అనేది CSS అమర్తకం ద్వారా నిర్వచించబడవచ్చు: direction
和 writing-mode
నిర్వచించడానికి ఉపయోగిస్తారు。
అద్దె స్థానం అనేది మీరు స్క్రాల్ చేసినప్పుడు స్టాప్ చేసినప్పుడు సిబ్బంది అంశం లో అద్దె స్థానం చేరుతుంది అని అర్థం వహిస్తుంది。
గమనిక:ఈ అమర్తకం మాత్రమే పదునైన దిశలో ఉంటుందిscroll-snap-align
అమర్తకం విలువలను 'start' లేదా 'end' గా సెట్ చేసినప్పుడు మాత్రమే ప్రభావం చూపుతుంది。
scroll-padding-inline అమర్తకం క్రింది అమర్తకాల లఘువు ఉంది:
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;
属性值
值 | 描述 |
---|---|
auto | 默认值。浏览器计算内边距。 |
length |
以 px、pt、cm 等单位指定 scroll-padding-inline。 不允许使用负值。请参阅:CSS యూనిట్లు. |
% | 以包含元素宽度的百分比指定内边距。 |
initial | ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. దయచేసి ఈ కు మీద చూడండి: initial. |
inherit | ఈ లక్షణాన్ని తన పేర్పడ్డ మూల ఎలిమెంట్ నుండి పారంపర్యం చేసుకుంటుంది. దయచేసి ఈ కు మీద చూడండి: inherit. |
సాంకేతిక వివరాలు
అప్రమేయ విలువ: | auto |
---|---|
పారంపర్యం కార్యకలాపం: | లేదు |
అనిమేషన్ తయారీ: | మద్దతు లేదు. దయచేసి ఈ కు మీద చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు. |
వెర్షన్: | CSS3 |
జావాస్క్రిప్ట్ సంకేతాలు: | object.style.scrollPaddingInline="20px" |
బ్రౌజర్ మద్దతు
పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ నిర్దేశిస్తుంది.
క్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఆపెరా |
---|---|---|---|---|
69.0 | 79.0 | 68.0 | 15.0 | 56.0 |
సంబంధిత పేజీలు
పరిశీలనకు:CSS డిరెక్షన్ అట్రిబ్యూట్
పరిశీలనకు:CSS స్క్రోల్-స్నాప్-అలయిన్ అట్రిబ్యూట్
పరిశీలనకు:CSS స్క్రోల్-స్నాప్-టైప్ అట్రిబ్యూట్
పరిశీలనకు:CSS వ్రాటింగ్-మోడ్ అట్రిబ్యూట్
- ముందస్తు పేజీ scroll-padding-bottom
- తదుపరి పేజీ scroll-padding-inline-end