CSS స్క్రోల్-మార్జిన్-ఇన్లైన్-ఎండ్ అట్రిబ్యూట్
- ముందస్తు పేజీ scroll-margin-inline
- తదుపరి పేజీ scroll-margin-inline-start
定义和用法
scroll-margin-inline-end 属性指定在行内方向上，吸附位置与容器之间的距离。
这意味着，当你停止滚动时，滚动会快速调整并在行内方向上停在指定的距离处，这个距离是指子元素末端的吸附位置与容器之间的距离。
行内方向是指下一字符相对于现有字符在行中的位置放置的方向，这也是具有 CSS display: inline; 的标签（如 和 标签）在文本中的布局方式。行内方向取决于书写语言，例如阿拉伯语的新字符是从右到左排列的，因此行内方向是从右到左的，而英文页面的行内方向是从左到右的。行内方向可以通过 CSS 属性 direction మరియు writing-mode 定义。
吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。
注意：此属性仅在行内方向上设置了 scroll-snap-align 属性为 'end' 时才起作用。
要看到 scroll-margin-inline-end లక్షణం యొక్క ప్రభావాన్ని చూడడానికి, ఉపవిభాగం పై సెట్ చేయబడినప్పుడు scroll-margin-inline-end మరియు scroll-snap-align లక్షణం scroll-snap-type లక్షణం.
సిఎస్ఎస్ యొక్క scroll-margin-inline మరియు scroll-margin-block లక్షణాలు క్రమేణా సిఎస్ఎస్ లక్షణాలతో పరిణతి చెందినవి, మరియు పేర్పడ్డ ఉపవిభాగం పై సెట్ చేయబడినప్పుడు CSS స్క్రోల్-మార్జిన్-టాప్ అట్రిబ్యూట్మరియుscroll-margin-bottomమరియుscroll-margin-left మరియు scroll-margin-right చాలా విలువని ఉంటుంది, కానీ scroll-margin-block మరియు scroll-margin-inline లక్షణం బ్లాక్ దిశ మరియు పంక్తి దిశ పై ఆధారపడి ఉంటుంది.
ఉదాహరణ
ఉదాహరణ 1
సరిహద్దు నుండి కింది ఉపవిభాగం నుండి దూరాన్ని నిర్దేశించండి:
div {
scroll-margin-inline-end: 20px;
}
ఉదాహరణ 2
ముఖ్యంగా <div> ఉపవిభాగం యొక్క writing-mode లక్షణానికి విలువ నుండి vertical-rl చేసినప్పుడు పంక్తి దిశ కుడి నుండి క్రిందకు ఉంటుంది. ఫలితంగా ఉపవిభాగం యొక్క ముగింపు కుడి మూలనుండి క్రిందకు కదులుతుంది:
div {
scroll-margin-inline-end: 20px;
writing-mode: vertical-rl;
}
ఉదాహరణ 3
ముఖ్యంగా <div> ఉపవిభాగం యొక్క direction లక్షణానికి విలువ నుండి rtl చేసినప్పుడు పంక్తి దిశ కుడి నుండి ఎడమ దిశకు ఉంటుంది. ఫలితంగా ఉపవిభాగం యొక్క ముగింపు కుడి మూలనుండి ఎడమ మూలనుండి కదులుతుంది:
div {
scroll-margin-inline-end: 20px;
direction: rtl;
}
CSS సంకేతాలు
scroll-margin-inline-end: 0|value|initial|inherit;
లక్షణానికి విలువ
| విలువ | వివరణ |
|---|---|
| 0 | అప్రమేయ విలువ. కైంది ఉపవిభాగం యొక్క అప్రమేయ scroll-margin-inline-end దూరం. |
| length |
px, pt, cm వంటి అంతరాలను నిర్దేశించండి. నిష్పకాంకీభవనాలను అనుమతిస్తారు。 ఈ కు మీద చూడండి:సిఎస్ఎస్ యూనిట్స్. |
| initial | ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. ఈ కు మీద చూడండి: initial. |
| inherit | ఈ లక్షణాన్ని తన పేర్పడ్డ ఉపవిభాగం నుండి పారంపర్యం చేసుకుంటారు. ఈ కు మీద చూడండి: inherit. |
సాంకేతిక వివరాలు
| అప్రమేయ విలువ: | 0 |
|---|---|
| పారంపర్యం కారకత వారు: | ఏ |
| అనిమేషన్ తయారీ: | మద్దతు లేదు. దయచేసి ఈ కు మీద చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు. |
| వెర్షన్: | CSS3 |
| జావాస్క్రిప్ట్ సంకేతాలు: | object.style.scrollMarginInlineEnd="20px" |
బ్రౌజర్ మద్దతు
పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను సూచిస్తాయి。
| క్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
సంబంధిత పేజీలు
参考：CSS స్క్రోల్-స్నాప్-అలయిన్ అట్రిబ్యూట్
- ముందస్తు పేజీ scroll-margin-inline
- తదుపరి పేజీ scroll-margin-inline-start
