CSS scroll-margin-left ominaisuus

定义和用法

scroll-margin-left Ominaisuuden avulla kiinnityspisteen ja konteinerin välinen etäisyys.

Imusijainti tarkoittaa lapsielementin sijoittamista kiinni konteinerissa, kun vieritys pysähtyy. Imusijainti määritetään scroll-snap-align Ominaisuuden asettaminen, mutta se voi myös olla vaikuttanut CSS-ominaisuuksiin direction ja writing-mode vaikutukset.

Huomioitavaa:Tämä ominaisuus on voimassa vain, jos imusijainti on asetettu lapsielementin vasemmalle reunalle.

voidakseen nähdä scroll-margin-left Ominaisuuden vaikutus, mutta se voi myös olla vaikuttanut CSS-ominaisuuksiin scroll-margin-left ja scroll-snap-align Ominaisuus, ja aseta isäntäelementissä scroll-snap-type Ominaisuus.

Esimerkki

Esimerkki 1

Aseta imusijainnin ja konteinerin välinen vieritysmargina 20px:llä:

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

Kokeile itse

Esimerkki 2: Kuvakokoelma

scroll-margin-left Ominaisuus voidaan käyttää imusijaintitoiminnon omaavassa kuvagalleriassa. Tässä:scroll-margin-left Näytä käyttäjälle, että vasemmalla on vielä yksi kuva. Vedä ensimmäistä kuvaa yli nähdäksesi vaikutuksen:

#container > img {
  scroll-margin-left: 30px;
}

Kokeile itse

Esimerkki 3: Imusijainti

Jotta scroll-margin-left Ominaisuus on voimassa, ja imusijainnin asettaminen on tehtävä lapsielementin vasemmalle reunalle. Tässä tapauksessa:direction Ominaisuus muuttaa imusijainnin vasemmasta reunasta oikeaan reunaan. Käytä tällaista koodia:scroll-margin-left Ominaisuus ei enää toimi:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

Kokeile itse

CSS-kieli

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

Ominaisuusarvo

Arvo Kuvaus
0 ScrollMarginLeft on 0. Oletusarvo.
length

Määritä arvo px, pt, cm ym. yksiköillä. Negatiiviset arvot ovat sallittuja.

Katso:CSS yksiköt.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Periisi isäntäelementistä tämän ominaisuuden. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: 0
Perintä: Ei
Animaatioiden luominen: Ei tuettu. Katso:Animaatiotulokset.
Versio: CSS3
JavaScript-kieli: object.style.scrollMarginLeft="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

Viittaukset:CSS suunta ominaisuus

Viittaukset:CSS scroll-snap-align ominaisuus

Viittaukset:CSS scroll-snap-type ominaisuus

Viittaukset:CSS writing-mode ominaisuus