CSS స్క్రాల్-ప్యాడింగ్ అట్రిబ్యూట్
- ముంది పేజీ scroll-margin-top
- తరువాత పేజీ scroll-padding-block
నిర్వచనం మరియు వినియోగం
scroll-padding ఈ అత్యార్థం కంటెయినర్ నుండి సబ్ అంశం అడ్హక్షన్ స్థానానికి దూరాన్ని నిర్ణయిస్తుంది.
ఇది అర్థం వహిస్తుంది కంటెయినర్ నుండి ఫోకస్ సబ్ అంశం అడ్హక్షన్ స్థానానికి తీసుకునే దూరం నిర్ణయించబడిన దూరంలో స్క్రోల్ త్వరగా సరికొంటుంది మరియు ఆగుతుంది.
అడ్హక్షన్ స్థానం అనేది, సబ్ అంశం స్క్రోల్ ఆగినప్పుడు, అది కంటెయినర్ లో ప్రస్థానం ఆగిన స్థానం అని అర్థం వహిస్తుంది.
scroll-padding ఈ అత్యార్థం క్రింది అత్యార్థాల సరళీకృత రూపం ఉంది:
scroll-padding అత్యార్థం విలువలను వివిధ రీతుల్లో అమర్చవచ్చు:
స్క్రోల్-ప్యాడింగ్ అత్యార్థం నాలుగు విలువలు ఉంటే:
scroll-padding: 15px 30px 60px 90px;
- పైన దూరం 15px
- కుడి దూరం 30px
- క్రిందన దూరం 60px
- ఎడమ దూరం 90px
స్క్రోల్-ప్యాడింగ్ అత్యార్థం మూడు విలువలు ఉంటే:
scroll-padding: 15px 30px 60px;
- పైన దూరం 15px
- 左侧和右侧距离为 30px
- క్రిందన దూరం 60px
స్క్రోల్-ప్యాడింగ్ అత్యార్థం రెండు విలువలు ఉంటే:
scroll-padding: 15px 30px;
- పైన మరియు క్రిందన దూరం 15px
- 左侧和右侧距离为 30px
如果 scroll-padding 属性有一个值：
scroll-padding: 10px;
- 所有四个方向的距离均为 10px
要看到 scroll-padding 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding 和 scroll-snap-type 属性。
注意：在下面的例子中，为所有边设置了滚动内边距，但由于 scroll-snap-align పైవైపు స్క్రాల్ ప్యాడింగ్ మాత్రమే అనిమేషన్ ప్రభావాన్ని మార్చుతుంది.
ఇన్స్టాన్స్
ఉదాహరణ 1
కంటైనర్ నుండి పటిష్టమైన స్థానానికి స్క్రాల్ ప్యాడింగ్ ను 20px గా నిర్వహించండి:
div {
scroll-padding: 20px;
}
ఉదాహరణ 2: చిత్రాల కార్యక్రమం
scroll-padding లక్షణం పటిష్టమైన సబ్స్క్రాయిబర్ పోస్టర్ గ్యాలరీలో ఉపయోగించబడవచ్చు, పటిష్టమైన ఉపాంతం క్రిందకు చిత్రాలను తీసుకురావడానికి:
#container {
scroll-padding: 30px 0 0 0;
}
ఉదాహరణ 3: క్రింది మరియు కుడివైపు స్క్రాల్ ప్యాడింగ్ నిర్దేశించండి
scroll-padding లక్షణం కంటైనర్ ప్రక్కన మరియు కుడివైపు నిర్వహించబడవచ్చు. అనిమేషన్ను సాగించి ప్రభావాన్ని చూడండి:
#container {
scroll-padding: 0 10px 30px 0;
}
CSS సంకేతాలు
scroll-padding: auto|value|initial|inherit;
లక్షణ విలువ
| విలువ | వివరణ |
|---|---|
| auto | అప్రమేయ విలువ. |
| length |
px, pt, cm మొదలైన ఇకాన్లలో స్క్రాల్ ప్యాడింగ్ ను నిర్దేశించండి. మానిటర్ లేదా ఇతర ఇకాన్ లో అప్రమేయ విలువలను ఉపయోగించకుండా ఉంచండి. దయచేసి ఈ లింక్ ను చూడండి:CSS యూనిట్స్. |
| % | కంటైనర్ వెడల్పునకు సంబంధించిన ప్రత్యక్ష కొలతలు లోపల ప్రాంతానికి ప్రాంతం కల్పిస్తుంది。 |
| initial | ఈ లక్షణాన్ని అప్రమేయ విలువకు అమర్చండి. దయచేసి ఈ లింక్ ను చూడండి: initial. |
| inherit | ఈ లక్షణాన్ని తన పేర్పడ్డ ఉపఘటకం నుండి పారంపర్యం చేసుకుంది. దయచేసి ఈ లింక్ ను చూడండి: inherit. |
సాంకేతిక వివరాలు
| అప్రమేయ విలువ: | auto |
|---|---|
| పారంపర్యం కారకత్వం: | ఏ |
| అనిమేషన్ తయారీ: | మద్దతు లేదు. దయచేసి ఈ లింక్ ను చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు. |
| వెర్షన్: | CSS3 |
| జావాస్క్రిప్ట్ సంకేతాలు: | object.style.scrollPadding="20px" |
బ్రౌజర్ మద్దతు
పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను సూచిస్తాయి。
| క్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
సంబంధిత పేజీలు
సూచనలు:CSS స్క్రాల్-ప్యాడింగ్-బాటం అట్రిబ్యూట్
సూచనలు:CSS స్క్రాల్-ప్యాడింగ్-లెఫ్ట్ అట్రిబ్యూట్
సూచనలు:CSS స్క్రాల్-ప్యాడింగ్-రైట్ అట్రిబ్యూట్
సూచనలు:CSS స్క్రాల్-ప్యాడింగ్-టాప్ అట్రిబ్యూట్
- ముంది పేజీ scroll-margin-top
- తరువాత పేజీ scroll-padding-block
