CSS scroll-margin-block-start ominaisuus

Määrittely ja käyttö

scroll-margin-block-start Ominaisuus määrittää etäisyyden alaspäin suuntautuvan alueen alun ja konteinerin välillä.

Tämä tarkoittaa, että kun lopetat pyörittämisen, pyöriminen mukautuu nopeasti ja pysähtyy määrättyyn etäisyyteen alaspäin suuntautuvan alueen alun ja konteinerin välillä.

Kappi-ohjaus tarkoittaa sitä, missä suhteessa seuraava rivi sijoittuu nykyiseen riviin, mikä on myös CSS:n display: block; -ominaisuuden omaavien elementtien (kuten <p> ja <div>-elementtien) sijoittumistapa sivulla. Kappi-ohjaus riippuu kirjoituskielestä, esimerkiksi mongolian kielessä uusi rivi sijoittuu vasemmalta oikealle, joten kappi-ohjaus on vasemmalta oikealle, kun taas englanninkielisillä sivuilla kappi-ohjaus on alaspäin. Kappi-ohjaus voidaan määrittää CSS-ominaisuuden avulla writing-mode Määritelmä.

Määritelmä.

Kiinnityspaikka tarkoittaa sijaintia, johon lapsielementti kiinnittyy säiliössä, kun pyörität loppuun.Huomaa: scroll-snap-align Tämä ominaisuus toimii vain lohkollehdun suunnassa.

Ominaisuuden asettaminen 'start' -arvoon on vaadittu. scroll-margin-block-start Ominaisuuden vaikutuksen näkemiseksi, on asetettava lapsielementille scroll-margin-block-start ja scroll-snap-align Ominaisuus, ja aseta vanhemmalle elementille scroll-snap-type ominaisuutta.

CSS:n scroll-margin-inline ja scroll-margin-block Ominaisuus vastaa CSS-ominaisuutta CSS scroll-margin-top -ominaisuus,scroll-margin-bottom,scroll-margin-left ja scroll-margin-right ovat erittäin samanlaisia, mutta scroll-margin-block ja scroll-margin-inline Ominaisuus riippuu lohkollehdusta ja rivilehdusta.

Esimerkki

Esimerkki 1

Aseta lohkollehdun suunnassa, ulkoreunusvälitys sijaintiin säiliöön 20px:een:

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

Kokeile itse

Esimerkki 2

Kun <div>-elementin writing-mode Kun ominaisuus arvo on vertical-rl, lohkollehdun suunta on oikealta vasemmalle. Tämä tarkoittaa, että elementin alkupuoli siirtyy ylhäältä oikealle:

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

Kokeile itse

CSS-kirjoituskieli

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

Ominaisuusarvo

Tekninen yksityiskohta

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Liittyvät sivut

Viittaukset:CSS scroll-snap-align -ominaisuus

Viittaukset:CSS scroll-snap-type -ominaisuus

Viittaukset:CSS writing-mode ominaisuus