CSS స్క్రోల్-ప్యాడింగ్-లెఫ్ట్ అట్రిబ్యూట్
- ముందు పేజీ scroll-padding-inline-start
- తరువాత పేజీ scroll-padding-right
నిర్వచనం మరియు వినియోగం
scroll-padding-left పద్ధతి అంశం ప్రారంభం నుండి చిల్లర అంశం వరకు ఉంది.
పద్ధతి అంశం అర్ధం చెప్పగలదు చిల్లర అంశం పద్ధతి అంశం సెట్ చేయబడినప్పుడు, సరకు పరిధిలో సముచితంగా స్థానం పొందిన స్థానం.
పద్ధతి అంశం ప్రారంభం నుండి చిల్లర అంశం వరకు ఉంది. scroll-snap-align లక్షణం అంశం సెట్ చేయబడినప్పటికీ, కూడా CSS లక్షణం ప్రభావితం కావచ్చు. direction 和 writing-mode ప్రభావం.
జాగ్రత్త చేయండి:ఈ లక్షణం కేవలం పద్ధతి అంశం చిల్లర అంశం యొక్క ఎడమ భాగంలో సెట్ చేయబడినప్పుడు మాత్రమే చెల్లును.
要看到 scroll-padding-left 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding-left 和 scroll-snap-type 属性。
实例
例子 1
将滚动内边距设置为从容器左侧到吸附位置的距离为 20px：
div {
scroll-padding-left: 20px;
}
例子 2：图片库
scroll-padding-left 属性可用于具有吸附行为的图片画廊，以将图片从固定元素后面推入视图中：
#container > img {
scroll-padding-left: 30px;
}
例子 3：在左侧设置滚动内边距
当在两个方向上都设置了吸附行为时，也可以在容器上设置 scroll-padding-left సబ్ స్థానాన్ని స్థానానికి మార్చడానికి సబ్ ఉపమూలకం పైన సబ్ స్థానాన్ని స్థానానికి మార్చడానికి అమర్చండి:
#container > div {
scroll-padding-left: 30px;
}
ఉదాహరణ 4: సబ్ స్థానం
ఈ కొన్ని లక్షణాలను చూపించడానికి కావలసిన ఉపమూలకం పైన అమర్చండి: scroll-padding-left లక్షణం ప్రభావితమవుతుంది. సబ్ ఉపమూలకం పైన స్థానాన్ని ఎడమకు అమర్చాలి. ఈ ఉదాహరణలో ఈ కొన్ని లక్షణాలు ప్రభావితమవుతాయి:direction విలువ 'rtl' అనేది పిల్ల ఉపమూలకం యొక్క ఎడమ స్థానాన్ని కుడికి మారుస్తుంది. ఈ కోడ్ను ఉపయోగిస్తే ఈ కొన్ని లక్షణాలు ప్రభావితమవుతాయి:scroll-padding-left అప్రమేయ లక్షణం ప్రభావితమవుతుంది:
#container {
direction: rtl;
scroll-padding-left: 30px;
}
#container > div {
scroll-snap-align: none start;
}
CSS సంకేతాలు
scroll-padding-left: auto|value|initial|inherit;
లక్షణపు విలువ
| విలువ | వివరణ |
|---|---|
| auto | అప్రమేయ విలువ. |
| length |
px, pt, cm వంటి అక్షరాంశాలతో scroll-padding-left నిర్దేశించండి. నిషేధించబడిన మానికింగ్ విలువలు. చూడండి:CSS యూనిట్స్. |
| % | కంటైనర్ వెడల్పు శాతంగా పెద్దతనం ముందు ప్రాంతాన్ని నిర్దేశించండి. |
| initial | ఈ లక్షణాన్ని అప్రమేయ విలువకు అమర్చండి. చూడండి: initial. |
| inherit | ఈ లక్షణాన్ని తన పేర్పడ్డ ఉపమూలకం నుండి పారంతర్యం చేసుకుంటుంది. చూడండి: inherit. |
సాంకేతిక వివరాలు
| అప్రమేయ విలువ: | auto |
|---|---|
| పారంతర్యం లక్షణం: | ఏ |
| అనిమేషన్ తయారీ: | మద్దతు లేదు. దయచేసి ఈ కు సంబంధించి చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు. |
| వెర్షన్: | CSS3 |
| జావాస్క్రిప్ట్ సంకేతాలు: | object.style.scrollPaddingLeft="20px" |
బ్రౌజర్ మద్దతు
పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను పేర్కొంటాయి。
| క్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఆపెరా |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
సంబంధిత పేజీలు
సూచనలు:CSS డిరెక్షన్ అట్రిబ్యూట్
సూచనలు:CSS స్క్రోల్-స్నాప్-అలైన్ అట్రిబ్యూట్
- ముందు పేజీ scroll-padding-inline-start
- తరువాత పేజీ scroll-padding-right
