CSS scroll-padding-top ominaisuus

Määrittely ja käyttö

scroll-padding-top Ominaisuus määrittää etäisyyden kontin ylälaidasta tytärylemin imukohdalle.

Imukohdan sijainti tarkoittaa, että tytäryleminen on kiinnittynyt paikalleen kontissa, kun rullaus on pysäytetty.

Imusijainnin sijainti scroll-snap-align Ominaisuuden asettaminen, mutta se voi myös olla vaikuttamatta CSS-ominaisuuksiin direction ja writing-mode vaikutukset.

Huomioitavaa:Tämä ominaisuus on voimassa vain, kun imusijainnin sijainti on asetettu elementin ylälaidalle.

Nähdäksesi scroll-padding-top Ominaisuuden vaikutus, joka näkyy vanhemmassa elementissä, on asetettava scroll-snap-align Ominaisuus, ja aseta scroll-padding-top ja scroll-snap-type Ominaisuus.

Esimerkki

Esimerkki 1

Aseta scroll-padding-top-arvo 20px:sta容器的顶部到吸附位置的距离：

div {
  scroll-padding-top: 20px;
}

Kokeile itse

Esimerkki 2: Kuvakirjasto

scroll-padding-top Ominaisuus voidaan käyttää imusijainnin käyttäytymisen omaavilla kuvagallerioilla, jotta kuvat siirtyvät kiinteän elementin alle:

#container {
  scroll-padding-top: 30px;
}

Kokeile itse

Esimerkki 3: Aseta滚动内边距到顶部

Kun imusijainnin käyttäytyminen on asetettu molemmissa suunnissa, voidaan myös asettaa scroll-padding-top Ominaisuus. Pyydä venyttämään ylös seuraavaa elementtiä nähdäksesi vaikutuksen:

#container {
  scroll-padding-top: 30px;
}

Kokeile itse

Esimerkki 4: Imusijainnin sijainti

Jotta scroll-padding-top Ominaisuus on aktiivinen, ja imusijainnin asettaminen on tehtävä elementin ylälaidalle. Tässä esimerkissä,writing-mode Ominaisuus muuttaa imusijainnin alusta elementin ylälaidasta oikealle. Kun käytät tällaista koodia,scroll-padding-top Ominaisuus ei enää toimi:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

Kokeile itse

CSS-kieli

scroll-padding-top: auto|value|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
auto Oletusarvo. Selain laskee sisätilan.
length

Määritä scroll-padding-top px, pt, cm ym. yksiköillä.

Ei sallita negatiivisia arvoja. Katso:CSS yksiköt.
% Määritä sisätilan prosenttiosuus sisennyslaitteena.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: auto
Perintä: Ei
Animaation tekeminen: Ei tuettu. Katso:Animaatiot.
Versio: CSS3
JavaScript-kieli: object.style.scrollPaddingTop="20px"

Selaimen tuki

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Liittyvät sivut

Viittaukset:CSS direction ominaisuus

Viittaukset:CSS scroll-snap-align ominaisuus

Viittaukset:CSS scroll-snap-type ominaisuus

Viittaukset:CSS writing-mode ominaisuus