CSS scroll-margin-right -ominaisuus

定义和用法

scroll-margin-right Ominaisuuden avulla kiinnityspaikan ja konteinerin välinen etäisyys.

Kiinnityspaikka tarkoittaa, että alkiot pysyvät kiinni konteinerissa, kun käyttäjä pyörittää sitä. Kiinnityspaikka määritetään scroll-snap-align Ominaisuuden asettaminen, mutta se voi myös olla alttiina CSS-ominaisuuksien direction ja writing-mode vaikutukset.

Huomaa:Tämä ominaisuus toimii vain, jos kiinnityspaikka asetetaan alkioiden oikealle.

Nähdäksesi scroll-margin-right Ominaisuuden vaikutus näkyy, jos se asetetaan lapsen alkiolle. scroll-margin-right ja scroll-snap-align Ominaisuus, ja aseta isäntälähteen scroll-snap-type Ominaisuus.

Esimerkki

Esimerkki 1

Aseta kiinnityspaikan ja konteinerin välinen pyöristys ulkoreunalla 20px:ksi:

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

Kokeile itse

Esimerkki 2: Kuvakokoelma

scroll-margin-right Ominaisuus voidaan käyttää kiinnitystoiminnan omaavassa kuvagalleriassa. Tässä:scroll-margin-right Näytä käyttäjälle, että oikealla on vielä yksi kuva. Pyöritä ensimmäistä kuvaa katsoaksesi vaikutuksen:

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

Kokeile itse

Esimerkki 3: Kiinnityspaikka

Jotta scroll-margin-right Ominaisuus toimii, ja kiinnityspaikka on asetettava alkioiden oikealle. Tässä esimerkissä:direction Ominaisuus muuttaa kiinnityspaikan sijainnin alkioiden oikealta vasemmalle. Käytä tällaista koodia:scroll-margin-right Ominaisuus ei enää toimi:

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

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Arvo Kuvaus
0 Pyöristys ulkoreunalla oikealle on 0. Oletusarvo.
length

Määritä pyöristys ulkoreunalla oikealle px, pt, cm ym. yksiköissä. Negatiiviset arvot ovat sallittuja.

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

Tekninen yksityiskohta

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

Selaimen tuki

Taulukon numerot merkitsevät ensimmäistä selainta, joka tukee ominaisuutta täysin.

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