CSS స్క్రోల్-ప్యాడింగ్-టాప్ అట్రిబ్యూట్
- ముంది పేజీ scroll-padding-right
- తరువాతి పేజీ scroll-snap-align
నిర్వచనం మరియు ఉపయోగం
scroll-padding-top అంతరం అంటే కంటైనర్ పైకి నుండి సబ్ ఎలమెంట్ అడ్సాబ్స్ చేయబడిన స్థానం వరకు దూరం నిర్వచిస్తుంది.
సబ్ ఎలమెంట్ ప్రయాణం ఆగినప్పుడు, అది కంటైనర్ లో సబ్ ఎలమెంట్ అడ్సాబ్స్ చేయబడిన స్థానం అనేది అని అర్థం చేసుకోవాలి.
吸附位置由 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction మరియు writing-mode 的影响。
注意：此属性仅在吸附位置设置在子元素顶部时有效。
要看到 scroll-padding-top 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding-top మరియు scroll-snap-type లక్షణం.
ఉదాహరణ
ఉదాహరణ 1
కంటైనర్ పైన నుండి అడుగును పెట్టడానికి స్క్రాల్ అంతరాంతరాన్ని 20px గా నిర్దేశించండి:
div {
scroll-padding-top: 20px;
}
ఉదాహరణ 2: చిత్రదర్శకం
scroll-padding-top అడుగును పెట్టడం కలిగిన చిత్రదర్శకాలను ఉపయోగించి చిత్రాలను స్థిర అంశం క్రిందకు తీసుకువెళ్ళడానికి ఈ లక్షణం ఉపయోగించవచ్చు:
#container {
scroll-padding-top: 30px;
}
ఉదాహరణ 3: పైన స్క్రాల్ అంతరాంతరాన్ని నిర్దేశించడం
రెండు దిశలలోనూ అడుగును పెట్టడం నిర్దేశించినప్పుడు, కంటైనర్ పైన కూడా అడుగును పెట్టడం నిర్దేశించవచ్చు: scroll-padding-top పిల్ల అంశంపైన పరిశీలించడానికి ఉన్నత రెక్కలు రాసి చూడండి:
#container {
scroll-padding-top: 30px;
}
ఉదాహరణ 4: అడుగును పెట్టడం
దానిని చేయడానికి వాడిన లక్షణం: scroll-padding-top లక్షణం పనిచేస్తుంది. ఈ ఉదాహరణలో ఉండగలదు అడుగును పిల్ల అంశం పైన అడుగును అంగీకరించాలి.writing-mode లక్షణం పిల్ల అంశం పైన అడుగును మార్చుతుంది. ఈ కోడ్ని ఉపయోగించినప్పుడు ఉండగలదు ఈ లక్షణం పనిచేస్తుంది:scroll-padding-top ఈ లక్షణం ఇకపై పనిచేయదు:
#container {
writing-mode: vertical-rl;
scroll-padding-top: 30px;
}
#container > div {
scroll-snap-align: start none;
}
CSS సంకేతాలు
scroll-padding-top: auto|value|initial|inherit;
లక్షణ విలువ
| విలువ | వివరణ |
|---|---|
| auto | అప్రమేయ విలువ. |
| length |
px, pt, cm వంటి అంకెలు తో scroll-padding-top నిర్దేశించండి. నకిలీ విలువలను ఉపయోగించకుండా చూడండి:సిఎస్ఎస్ యూనిట్స్. |
| % | అంతరం విస్తీర్ణాన్ని కలిగిన అంతరాంతరాలను నిర్దేశించండి. |
| initial | ఈ లక్షణాన్ని అప్రమేయ విలువకు అంగీకరించండి. చూడండి: initial. |
| inherit | ఈ లక్షణాన్ని తన పేర్వస్థి నుండి పారంతర్యంగా అంగీకరించండి. చూడండి: inherit. |
సాంకేతిక వివరాలు
| అప్రమేయ విలువ: | auto |
|---|---|
| పారంతర్యంగా ఉండదు: | ఏ |
| అనిమేషన్ తయారీ: | మద్దతు లేదు. చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు. |
| సంస్కరణ: | CSS3 |
| జావాస్క్రిప్ట్ సంకేతాలు: | object.style.scrollPaddingTop="20px" |
బ్రౌజర్ మద్దతు
పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న ప్రయాణికరుల సంస్కరణ సంఖ్యను సూచిస్తాయి.
| క్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
相关页面
పరిచయం:CSS డిరెక్షన్ అట్రిబ్యూట్
పరిచయం:CSS స్క్రోల్-స్నాప్-అలయిన్ అట్రిబ్యూట్
- ముంది పేజీ scroll-padding-right
- తరువాతి పేజీ scroll-snap-align
