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

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

scroll-margin-top 属性指定吸附位置与容器之间的距离。

吸附位置是指子元素在停止滚动时，其在容器中固定到位的位置。吸附位置通过 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction 和 writing-mode 的影响。

注意：此属性仅在吸附位置设置在子元素的顶部时才有效。

要看到 scroll-margin-top 属性的效果，必须在子元素上设置 scroll-margin-top 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type లక్షణం

ప్రతిమానికి

ఉదాహరణ 1

పాత్రికేయకం మరియు కంటైనర్ మధ్య పైన స్క్రాల్ మార్జిన్ను 20pxగా అమర్చండి:

div {
  scroll-margin-top: 20px;
}

స్వయంగా ప్రయోగించండి

ఉదాహరణ 2: చిత్రాల సేకరణ

scroll-margin-top పాత్రికేయకం ప్రవర్తన కలిగిన చిత్రాల గ్యాలరీలో ఈ లక్షణం ఉపయోగించబడవచ్చు. ఇక్కడ:scroll-margin-top వినియోగదారుకు పైన ఇంకా ఒక చిత్రం ఉన్నది తెలియజేయండి. మొదటి చిత్రం పాటు స్క్రాల్ చేయండి మరియు ప్రభావాన్ని చూడండి:

#container > img {
  scroll-margin-top: 30px;
}

స్వయంగా ప్రయోగించండి

ఉదాహరణ 3: పాత్రికేయకం స్థానం

దానికి చేయడానికి: scroll-margin-top లక్షణం పనిచేయబడినప్పుడు, పాత్రికేయకంపై పాత్రికేయకం పాత్రికేయకంపై పాత్రికేయకం అమర్చబడాలి. ఈ ఉదాహరణలో:writing-mode లక్షణం పాత్రికేయకం నుండి పాత్రికేయకం యొక్క పైన పాత్రికేయకం మార్చడానికి ఉపయోగించండి. ఈ కోడ్ ఉపయోగించినప్పుడు:scroll-margin-top లక్షణం ఇకపై పనిచేయబడదు:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

స్వయంగా ప్రయోగించండి

సిఎస్ఎస్ సంకేతాలు

scroll-margin-top: 0|value|initial|inherit;

లక్షణ విలువ

సాంకేతిక వివరాలు

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న బ్రౌజర్ సంస్కరణను సూచిస్తాయి。

相关页面

参考：CSS డిరెక్షన్ అట్రిబ్యూట్

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

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

参考：CSS వ్రాయింగ్-మోడ్ అట్రిబ్యూట్