Atrybut scroll-padding-block-start w CSS

Definicja i użycie

scroll-padding-block-start Atrybut określa odległość od początkowego położenia kontenera do pozycji przyciągania elementu potomnego w kierunku blokowym.

Oznacza to, że po zatrzymaniu przewijania, przewijanie szybko dostosuje się i zatrzyma się w określonej odległości między pozycją przyciągania a kontenerem w kierunku blokowym.

Kierunek blokowy oznacza pozycję względem bieżącej linii, w której umieszczana jest następna linia. Jest to również sposób ułożenia etykiet mających CSS display: block; (np. znaczników <p> i <div>) na stronie. Kierunek blokowy zależy od języka pisanego, na przykład, w języku mongolskim nowe wiersze są ustawione od lewej do prawej, więc kierunek blokowy jest od lewej do prawej, podczas gdy w przypadku stron angielskich kierunek blokowy jest pionowy. Kierunek blokowy można określić za pomocą atrybutu CSS writing-mode

zdefiniowane.

Pozycja przyciągania się to pozycja, w której element potomny przyciąga się do kontenera, gdy zatrzymujesz przewijanie.Uwaga: scroll-snap-align Atrybut jest dostępny tylko w kierunku blokowym

Atrybut ustawiony na 'start' działa tylko. scroll-padding-block-start muszą być ustawione na elementach potomnych, aby zobaczyć scroll-snap-align Atrybut, a efekty atrybutu scroll-padding-block-start i scroll-snap-type Atrybut.

Przykład

Przykład 1

Ustaw wewnętrzną margines w kierunku blokowym od początku kontenera do miejsca przyciągania się na 20px:

div {
  scroll-padding-block-start: 20px;
}

Spróbuj sam

Przykład 2: Biblioteka obrazów

W galerii obrazów z zachowaniem przyciągania się można użyć scroll-padding-block-start Atrybut przesuwa obraz pod stały element:

#container {
  scroll-padding-block-start: 30px;
}

Spróbuj sam

Przykład 3

Gdy element kontenera writing-mode Gdy wartość atrybutu jest ustawiona na vertical-rl, początkowa pozycja kontenera w kierunku blokowym i elementy potomne przenoszą się z góry na prawo. To wpływa na zachowanie przyciągania się oraz scroll-padding-block-start Sposób działania atrybutu:

#container {
  scroll-padding-block-start: 20px;
  writing-mode: vertical-rl;
}

Spróbuj sam

Język CSS

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

Wartość atrybutu

Szczegóły techniczne

Wsparcie przeglądarki

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

Strony powiązane

Referencje:Atrybut scroll-snap-align w CSS

Referencje:Atrybut scroll-snap-type w CSS

Referencje:Atrybut writing-mode w CSS