CSS scroll-margin-block-end ominaisuus

定义和用法

scroll-margin-block-end 属性指定在块方向上，对齐位置与容器之间的距离。

这意味着当您停止滚动时，滚动会快速调整并停止在块方向上子元素结束处的吸附位置与容器之间的指定距离处。

块方向是指相对于现有行的位置，下一行被放置的方向。这也是具有 CSS display: block; 的标签（如 <p> 和 <div> 标签）在页面上布局的方式。块方向取决于书写语言，例如，蒙古语的新行从左到右排列，因此块方向也是从左到右，而英语页面的块方向是向下。块方向可以通过 CSS 属性 writing-mode Määritellä.}

Näytön sijainti tarkoittaa, että kun pysäytät pyyhkäisemisen, lapsielementti tarttuu sijaintiin kontissa.

Huomioitavaa:Tämä ominaisuus toimii vain lohkon suunnassa scroll-snap-align Ominaisuuden asettaminen 'end' asti vaikuttaa.

Nähdäksesi scroll-margin-block-end Ominaisuuden vaikutus näkyy, kun asetetaan lapsielementille scroll-margin-block-end ja scroll-snap-align Ominaisuus, ja aseta vanhemmalle elementille scroll-snap-type ominaisuus.

CSS:n scroll-margin-inline ja scroll-margin-block Ominaisuus on samanlainen kuin CSS-ominaisuus CSS scroll-margin-top ominaisuus,scroll-margin-bottom,scroll-margin-left ja scroll-margin-right On erittäin samanlainen, mutta scroll-margin-block ja scroll-margin-inline Ominaisuus riippuu lohkon ja rivejä sisältävän suunnasta.

Esimerkki

Esimerkki 1

Lohkon suunnassa, aseta kohdistuspaikka ja konttin välisen pyyhkäisymarginaalin etäisyys 20px:

div {
  scroll-margin-block-end: 20px;
}

Kokeile itse

Esimerkki 2

Kun <div>-elementin writing-mode Kun ominaisuus asetetaan vertical-rl, lohkon suunta on oikealta vasemmalle. Tämä tarkoittaa, että elementin loppu siirtyy alareunasta vasemmalle:

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

Kokeile itse

CSS-kieli

scroll-margin-block-end: 0|value|initial|inherit;

Ominaisuuden arvo

Tekninen yksityiskohta

Selaimen tuki

Taulukossa olevat luvut ilmaisevat ensimmäisen täysin tukevan selaimen version.

Liittyvät sivut

Viittaus:CSS scroll-snap-align ominaisuus

Viittaus:CSS scroll-snap-type ominaisuus

Viittaus:CSS writing-mode ominaisuus