Hisia ya CSS scroll-margin-inline

定义和用法

scroll-margin-inline 属性指定在行内方向上，吸附位置与容器之间的距离。

这意味着，当你停止滚动时，滚动会快速调整并在行内方向上停在指定的距离处，该距离位于吸附位置与容器之间。

行内方向是指下一字符相对于现有字符在行中的位置放置的方向，这也是具有 CSS display: inline; 的标签（如 和 标签）在文本中的布局方式。行内方向取决于书写语言，例如阿拉伯语的新字符是从右到左排列的，因此行内方向是从右到左的，而英文页面的行内方向是从左到右的。行内方向可以通过 CSS 属性 mawendo 和 mawendo Kufasili

Nafasi ya kuepuka ni nafasi ambayo maelezo wa chini haujafikia kufikiria kwenda kwenye kina cha kuu wakati wa kumaliza kusikia

scroll-margin-inline Kiwango hiki kinaweza kuwa kina ya kifupi cha kiwango chenye:

scroll-margin-inline Thamani ya kiwango cha kina kinaweza kufikirwa kwenye sababu mbalimbali:

Ikiwa na thamani mbili kwa scroll-margin-inline:

scroll-margin-inline: 20px 70px;
  • Ukubwa wa kuanzia ni 20px
  • Ukubwa wa kumaliza ni 70px

Ikiwa na thamani kwa kiwango cha scroll-margin-inline:

scroll-margin-inline: 20px;
  • Ukubwa wa kuanzia na kumaliza ni 20px

Tupata scroll-margin-inline Mfano wa kina, haipangwa kwenye maelezo wa chini scroll-margin-inline 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。

CSS 的 scroll-margin-inline 和 scroll-margin-block 属性与 CSS 属性 Hisia ya CSS scroll-margin-top、Scroll Margin Bottom、scroll-margin-left 和 scroll-margin-right 非常相似，但 scroll-margin-block 和 scroll-margin-inline 属性依赖于块方向和行内方向。

实例

例子 1

设置在行内方向上，从吸附位置到可滚动容器的距离：

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

Jifunze kwa urahisi

Mfano 2

Kama <div> elementi ina: mawendo Kama chaguo cha mafanikio huu ni vertical-rl, mawendo wa kijana ni kusini. Matokeo ni kwamba nafasi ya kuanza ya elementi inapindua kutoka kushoto hadi kimoja, na nafasi ya kufikia ya elementi inapindua kutoka kulia hadi kwenye. Hii inaathiriwa na: scroll-margin-inline Mafanikio:

div {
  scroll-margin-inline: 20px 0;
  mawendo: vertical-rl;
}

Jifunze kwa urahisi

Mfano 3

Kama <div> elementi ina: mawendo Kama chaguo cha mafanikio huu ni rtl, mawendo wa kijana ni kusini hadi kulia. Matokeo ni kwamba nafasi ya kuanza ya elementi inapindua kutoka kushoto hadi kulia, na nafasi ya kufikia ya elementi inapindua kutoka kulia hadi kushoto. Hii inaathiriwa na: scroll-margin-inline Mafanikio:

div {
  scroll-margin-inline: 0 20px;
  mawendo: rtl;
}

Jifunze kwa urahisi

Inayofikia KiCSS:

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

Chaguo cha sababu

Chaguo Maelezo
0 Chaguo cha kuzingatia. Miwango wa kuzingatia wa scroll-margin-inline wa elementi.
length

Inasababisha kufikia kwa miwango ya px, pt, cm na vyenginevu. Inaruhusiwa kwa matumizi ya uadilifu.

Tazama:Maviko ya CSS.
initial Weka hii sababu kwa chaguo cha kuzingatia. Tazama: initial.
inherit Kumwemo hii sababu kwa kutumia katika elementi yake ya mawasiliano. Tazama: inherit.

Mafanikio ya teknolojia

Chaguo cha kuzingatia: 0
Mabaya wa kumuwemo: Hapana
Harakisha mafanikio: Hakuna mawasiliano. Tazama:Mafanikio ya harakisha.
Toleo: CSS3
Inayofikia KiJavaScript: object.style.scrollMarginInline="20px"

Mwongozo wa barabara

Mafanikio ya tabia hizi inaangalia na barabara ya kwanza ambayo inakubali sababu hii.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Paje Zingine Zilizotumika

Tafutaji:Hisia CSS direction

Tafutaji:Hisia ya CSS scroll-margin-inline-end

Tafutaji:Hisia ya CSS scroll-margin-inline-start

Tafutaji:Hisia ya CSS scroll-snap-align

Tafutaji:Hisia ya CSS scroll-snap-type

Tafutaji:Mwili wa writing-mode katika CSS