CSS scroll-padding ominaisuus

Definition and usage

scroll-padding The property specifies the distance from the container to the child element's吸附位置.

This means that when you stop scrolling, the scroll will quickly adjust and stop at a specified distance from the container to the focus child element's吸附位置.

The吸附位置 refers to the fixed position of the child element in the container when the scrolling stops.

scroll-padding The property is a shorthand property of the following properties:

scroll-padding The values of the property can be set in different ways:

If the scroll-padding property has four values:

scroll-padding: 15px 30px 60px 90px;
  • Top distance is 15px
  • Right distance is 30px
  • Bottom distance is 60px
  • Left distance is 90px

If the scroll-padding property has three values:

scroll-padding: 15px 30px 60px;
  • Top distance is 15px
  • vasen ja oikea etäisyys ovat 30px
  • Bottom distance is 60px

If the scroll-padding property has two values:

scroll-padding: 15px 30px;
  • Top and bottom distances are 15px
  • vasen ja oikea etäisyys ovat 30px

Jos scroll-padding ominaisuudella on yksi arvo:

scroll-padding: 10px;
  • kaikkien neljän suunnan etäisyydet ovat 10px

voidaksesi nähdä scroll-padding ominaisuuden scroll-snap-align ominaisuuden scroll-padding ominaisuus scroll-snap-type ominaisuus.

Huomioitavaa:Alla olevassa esimerkissä kaikki reunat asetettiin rullaus sisätilaksi, mutta scroll-snap-align Asetettu "start"-arvoon, joten vain ylälaidan rullaus sisätilan käyttäytyminen muuttui.

Esimerkki

Esimerkki 1

Aseta rullaus sisätilan 20px:sta容器的吸附位置：

div {
  scroll-padding: 20px;
}

Kokeile itse

Esimerkki 2：Kuvakokoelma

scroll-padding Ominaisuus voidaan käyttää imukykyisissä kuvagallerioissa, jotta kuvat tuodaan kiinteän elementin alle：

#container {
  scroll-padding: 30px 0 0 0;
}
Kiinteä ylätaso
Peking Tanssija Wuhan Kukka tulppaani Hangzhou

Kokeile itse

Esimerkki 3：Aseta alapuolen ja oikeanpuolen rullaus sisätila

scroll-padding Ominaisuus voidaan asettaa容器的底部和右侧同时。水平和垂直滚动到下一个元素以查看效果：

#container {
  scroll-padding: 0 10px 30px 0;
}





Kokeile itse

CSS syntaksi

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

Ominaisuusarvo

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

Määritä px, pt, cm jne. yksiköissä rullaus sisätilan.

Ei sallita negatiivisia arvoja. Katso:CSS yksiköt.
% Määritä suhteellinen sisätila prosenttiosuudenä sisältävässä elementissä.
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
Perinnäisyys: Ei
Animaation luominen: Ei tuettu. Katso:Animaatioon liittyvät ominaisuudet.
Versio: CSS3
JavaScript syntaksi: object.style.scrollPadding="20px"

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee kyseistä ominaisuutta.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Liittyvät sivut

Viittaus:CSS scroll-padding-bottom ominaisuus

Viittaus:CSS scroll-padding-left ominaisuus

Viittaus:CSS scroll-padding-right ominaisuus

Viittaus:CSS scroll-padding-top ominaisuus

Viittaus:CSS scroll-snap-align ominaisuus

Viittaus:CSS scroll-snap-type ominaisuus