CSS scroll-margin-block ominaisuus

Määrittely ja käyttö

scroll-margin-block Ominaisuus määrittää etäisyyden kiinnitys sijainnin (snap position) ja kontin välillä lohko-akselin suunnassa.

Tämä tarkoittaa, että kun lopetat pyörivän, pyöriä nopeasti mukautuu ja pysähtyy kiinnitys sijainnin ja kontin välisessä määritellyssä etäisyydessä.

Lohko-akseli tarkoittaa suuntaa, jossa seuraava rivi sijoitetaan nykyisen rivin suhteen, mikä on myös CSS:n display: block; -ominaisuuksilla varustettujen elementtien (kuten <p> ja <div>-elementtien) sijoittelu tapahtuu sivulla. Lohko-akseli riippuu kirjoituskielestä, esimerkiksi, mongolian kielen uudet rivit sijoittuvat vasemmalta oikealle, joten lohko-akseli on myös vasemmalta oikealle, kun taas englanninkielisillä sivuilla lohko-akseli on alas. Lohko-akselin voi määrittää CSS-ominaisuudella writing-mode määritellä.

Kiinnitys sijainti tarkoittaa, että kun lopetat pyörivän, lapsielementti sitoutuu sijaintiin kontissa.

Huomaa:Tämä ominaisuus on voimassa vain lohko-akselin suunnassa scroll-snap-align Ominaisuus on voimassa, kun arvo on 'start' tai 'end'.

scroll-margin-block Ominaisuus on seuraavien ominaisuuksien lyhennysmuoto:

scroll-margin-block Ominaisuuden arvo voidaan asettaa eri tavoin:

Jos scroll-margin-block-ominaisuudella on kaksi arvoa:

scroll-margin-block: 10px 50px;
  • loppupisteiden etäisyys on 50px
  • alkupisteiden etäisyys on 10px

loppupisteiden etäisyys on 50px

scroll-margin-block: 10px;
  • Jos scroll-margin-block-ominaisuudella on arvo:

alku- ja loppupisteiden etäisyys on 10px scroll-margin-block ominaisuus, jotta näet scroll-margin-block ja scroll-snap-align ominaisuus, ja aseta vanhemmalle elementille scroll-snap-type ominaisuus.

CSS:n scroll-margin-inline ja scroll-margin-block ominaisuus on CSS-ominaisuus CSS scroll-margin-top -ominaisuus,scroll-margin-bottom,scroll-margin-left ja scroll-margin-right erittäin samanlainen, mutta scroll-margin-block ja scroll-margin-inline Ominaisuus riippuu lohko- ja rivejäntee- suunnasta.

Esimerkki

Esimerkki 1

Aseta lohko- suuntaan tarttumispaikan etäisyys pyörivästä säiliöstä:

div {
  scroll-margin-block: 10px;
}

Kokeile itse

Esimerkki 2

Kun lapsielementin writing-mode Kun ominaisuuden arvo on vertical-rl, elementin alkupiste siirtyy ylältä oikealle ja loppupiste alalta vasemmalle suuntaan. Tämä vaikuttaa pyörivään tarttumiseen sekä scroll-margin-block Ominaisuuden toimintatapa:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

Kokeile itse

CSS-kieli

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

Ominaisuusarvo

Arvo Kuvaus
0 Oletus. Elementin oletus scroll-margin-block-arvo.
length

Määritä etäisyys px, pt, cm yms. yksiköissä. Sallitaan negatiiviset arvot.

Katso:CSS yksiköt.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Perii tämän ominaisuuden vanhemmalta elementiltä. Katso: inherit.

Tekninen tarkistus

Oletusarvo: 0
Perinnäisyys: Ei
Animaation tekeminen: Ei tuettu. Katso:Animaatiotunnukset.
Versio: CSS3
JavaScript-kieli: object.style.scrollMarginBlock="20px"

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Aiheeseen liittyvät sivut

Viittaus:CSS scroll-margin-block-end ominaisuus

Viittaus:CSS scroll-margin-block-start ominaisuus

Viittaus:CSS scroll-snap-align -ominaisuus

Viittaus:CSS scroll-snap-type -ominaisuus

Viittaus:CSS writing-mode ominaisuus