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

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

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

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

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

要看到 scroll-margin-right 属性的效果，必须在子元素上设置 scroll-margin-right మరియు scroll-snap-align లక్షణాన్ని మరియు పైగిన అంశంపై scroll-snap-align మరియు సెట్ చేయబడిన లక్షణాల ప్రభావాన్ని చూడడానికి మరియు సంబంధిత అంశంపై సెట్ చేయబడిన లక్షణాన్ని సెట్ చేయడానికి ఉపయోగించండి: scroll-snap-type లక్షణం.

ఉదాహరణ

ఉదాహరణ 1

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

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

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

ఉదాహరణ 2: చిత్రాల కొలక్షను

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

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

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

ఉదాహరణ 3: సంబంధిత స్థానం

ఈ కి తగిన పనిచేయడానికి: scroll-margin-right లక్షణం చేయుకున్నప్పుడు, సంబంధిత అంశం యొక్క పైకిరాయిని కుడికి మార్చడానికి అవసరం. ఈ ఉదాహరణలో:direction లక్షణం పద్ధతి నుండి సంబంధిత అంశం యొక్క పైకిరాయి నుండి కుడికి మార్చుతుంది. ఈ కోడ్ను ఉపయోగించినప్పుడు:scroll-margin-right లక్షణం ఇకపై పనిచేయదు:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-right: 30px;
  scroll-snap-align: none end;
}

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

CSS సంకేతాలు

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

లక్షణ విలువ

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

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

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

సంబంధిత పేజీలు

పరిచయం:CSS డిరెక్షన్ అట్రిబ్యూట్

పరిచయం:CSS స్క్రోల్-స్నాప్-అలయిన్ అట్రిబ్యూట్

పరిచయం:CSS స్క్రోల్-స్నాప్-టైప్ అట్రిబ్యూట్

పరిచయం:CSS వ్రాయింగ్-మోడ్ అట్రిబ్యూట్