CSS właściwość scroll-padding-top

Definicja i użycie

scroll-padding-top Atrybut określa odległość od góry kontenera do pozycji przyciągania podelementu.

Pozycja przyciągania to pozycja, w której podelement przyciąga się do położenia w kontenerze po zatrzymaniu przewijania.

Pozycja przyciągania przez}} scroll-snap-align i może również być wpływowane przez atrybut CSS ustawienie i writing-mode Właściwość

wpływ.Uwaga:

ten atrybut działa tylko, gdy pozycja przyciągania jest ustawiona na górze elementu potomnego. scroll-padding-top Właściwość, musi być ustawiona na elementach potomnych, aby zobaczyć scroll-snap-align Właściwość, a efekt ustawienia scroll-padding-top i scroll-snap-type Właściwość.

Przykład

Przykład 1

Ustaw wewnętrzną margines na odległość 20px od góry kontenera do pozycji przyciągania:

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

Spróbuj sam

Przykład 2: Biblioteka obrazów

scroll-padding-top Właściwość może być używana w galeriach z działaniami przyciągania, aby przeciągnąć obrazy pod stały element:

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

Spróbuj sam

Przykład 3: Ustawienie滚动内边距 w górę

Gdy ustawione są działania przyciągania w obu kierunkach, można również ustawić scroll-padding-top Właściwość. Przewiń w dół, aby zobaczyć efekt:

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

Spróbuj sam

Przykład 4: Pozycja przyciągania

Aby scroll-padding-top Właściwość działa, pozycja przyciągania musi być ustawiona na górze elementu potomnego. W tym przykładzie,writing-mode Właściwość przyciąga pozycję z góry elementu potomnego do prawej. Używając takiego kodu,scroll-padding-top Właściwość przestanie działać:

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

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
auto Domyślna wartość. Przeglądarka oblicza wewnętrzną margines.
length

Określ scroll-padding-top w jednostkach takich jak px, pt, cm.

Nie można używać ujemnych wartości. Zobacz:Jednostki CSS.
% Określ procentową szerokość zawartości jako wewnętrzną margines.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: auto
Inheritance: Nie
Tworzenie animacji: Nie wspierane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.scrollPaddingTop="20px"

Wsparcie przeglądarki

Tabela zawiera wersje przeglądarek, które w pełni wspierają tę właściwość.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Strony związane

Wskazówka:Atrybut direction w CSS

Wskazówka:CSS właściwość scroll-snap-align

Wskazówka:CSS właściwość scroll-snap-type

Wskazówka:Atrybut writing-mode w CSS