CSS vieritys-reuna ominaisuus

Määrittely ja käyttö

scroll-margin Ominaisuus määrittää etäisyyden kiinnitysposition ja kontin välillä.

Tämä tarkoittaa, että kun rullaus pysähtyy, se mukautuu nopeasti ja pysähtyy etäisyydellä kiinnitysposition ja kontin välillä.

Kiinnitysposition tarkoittaa sitä, että lapsielementti pysähtyy rullauksen aikana ja tarttuu sijaintiin kontissa.

scroll-margin Ominaisuus on seuraavien ominaisuuksien lyhennys:

scroll-margin Ominaisuuden arvoja voidaan asettaa eri tavoin:

Jos scroll-margin-ominaisuudella on neljä arvoa:

scroll-margin: 15px 30px 60px 90px;
  • Yläreuna etäisyydellä 15px
  • Oikea etäisyydellä 30px
  • Alareuna etäisyydellä 60px
  • Vasen etäisyydellä 90px

Jos scroll-margin-ominaisuudella on kolme arvoa:

scroll-margin: 15px 30px 60px;
  • Yläreuna etäisyydellä 15px
  • Vasemman ja oikean puolen etäisyydet ovat 30px
  • Alareuna etäisyydellä 60px

Jos scroll-margin-ominaisuudella on kaksi arvoa:

scroll-margin: 15px 30px;
  • Ylä- ja alareunan etäisyydet ovat 15px
  • Vasemman ja oikean puolen etäisyydet ovat 30px

Jos scroll-margin-ominaisuudella on yksi arvo:

scroll-margin: 10px;
  • Kaikkien neljän suunnan etäisyydet ovat 10px

Nähdäksesi scroll-margin Ominaisuuden vaikutus, on asetettava scroll-margin ja scroll-snap-align Ominaisuus, ja aseta scroll-snap-type Ominaisuus.

Huomioitavaa:Seuraavassa esimerkissä kaikki reunat asetetaan pyörivän ulkoreunauudistukseksi, mutta koska scroll-snap-align Ominaisuus asetettu "start"-arvoon, joten vain yläpuolinen pyörivän ulkoreunauudistus muuttuu pyörivänä.

Esimerkki

Esimerkki 1

Aseta imusäikeen sijainti ja容器的滚动外边距为 20px：

div {
  scroll-margin: 20px;
}

Kokeile itse

Esimerkki 2: Kuvakirjasto

scroll-margin Ominaisuus voidaan käyttää imusäikeillä varustetuissa kuvakirjastoissa. Tässä:scroll-margin Jotta käyttäjä voi nähdä vasemmalla myös yhden kuvan. Pyöritetty ensimmäinen kuva näyttää vaikutuksen:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Peking Tanssija Wuhan Kukka tulppaani Hangzhou

Kokeile itse

Esimerkki 3: Aseta alareunaan ja oikealle pyörivän ulkoreunauudistus

Voit asettaa sen alareunaan ja oikealle elementille scroll-margin Ominaisuus. Horisontaalinen ja vertikaalinen pyörivä seuraavaan elementtiin näyttää vaikutuksen:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





Kokeile itse

CSS-kieli

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

Ominaisuusarvo

Arvo Kuvaus
0 Pyörivän ulkoreunauudistus on nolla. Oletusarvo.
length

Määritä pyörivän ulkoreunauudistuksen yksiköillä px, pt, cm jne. Negatiiviset arvot ovat sallittuja.

Katso:CSS yksiköt.
initial Aseta tämä ominaisuus sen oletusarvoon. Katso: initial.
inherit Periisi tämän ominaisuuden isältä elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: 0
Perintä: Ei
Animaation tekeminen: Ei tuettu. Katso:Animaatioihin liittyvät ominaisuudet.
Versio: CSS3
JavaScript-kieli: object.style.scrollMargin="20px"

Selaimen tuki

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

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Liittyvät sivut

Viittaus:CSS scroll-margin-bottom ominaisuus

Viittaus:CSS scroll-margin-left ominaisuus

Viittaus:CSS scroll-margin-right ominaisuus

Viittaus:CSS scroll-margin-top ominaisuus

Viittaus:CSS scroll-snap-align ominaisuus

Viittaus:CSS scroll-snap-type ominaisuus