Atrybut scroll-padding-block-end w CSS

Definicja i użycie

scroll-padding-block-end Atrybut określa odległość od końca kontenera do pozycji przyciągania podelementu w kierunku blokowym.

Oznacza to, że po zatrzymaniu przewijania, przewijanie szybko dostosowuje się i zatrzymuje 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 następująca linia jest umieszczona. Jest to również sposób ustawiania layoutu etykiet z CSS display: block; (np. etykiety <p> i <div>) na stronie. Kierunek blokowy zależy od języka pisma, np. w języku mongolskim nowe wiersze są ustawione od lewej do prawej, więc kierunek blokowy jest od lewej do prawej, podczas gdy w stronie angielskiej kierunek blokowy jest pionowy. Kierunek blokowy można określić za pomocą atrybutu CSS writing-mode do definiowania.

Definiowane przez.

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

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

Przykład

Przykład 1

Ustawienie blokowego marginesu wewnętrznego od końca kontenera do miejsca przyciągania na 20px:

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

Spróbuj sam

Przykład 2: biblioteka obrazów

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

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

Spróbuj sam

Przykład 3

Kiedy element kontenera writing-mode Kiedy atrybut wartości ustawiony jest na vertical-rl, kierunek blokowy końca kontenera i elementów potomnych przechodzi od dołu do lewej. To wpływa na zachowanie przyciągania do paska rolki oraz scroll-padding-block-end Sposób działania atrybutu:

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

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Szczegóły techniczne

Obsługa przeglądarek

Liczby w tabeli oznaczają wersję przeglądarki, która w pełni obsługuje tę właściwość.

Powiązane strony

Wskazówka:Atrybut scroll-snap-align w CSS

Wskazówka:Atrybut scroll-snap-type w CSS

Wskazówka:Atrybut CSS writing-mode