Atrybut scroll-padding-block w CSS

Definicja i użycie

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

Oznacza to, że gdy zatrzymujesz przewijanie, przewijanie szybko dostosowuje się i zatrzymuje się w odległości określonej między pozycją przyciągania a kontenerem w kierunku blokowym.

Kierunek blokowy to kierunek umieszczania następnego wiersza w stosunku do istniejącej pozycji wiersza, co jest również sposobem布局 na stronie etykiet z CSS display: block; (np. <p> i <div> etykiety) na stronie. Kierunek blokowy zależy od języka pisma, na przykład, w języku mongolskim nowy wiersz jest ustawiany od lewej do prawej, więc kierunek blokowy również jest od lewej do prawej, podczas gdy strona angielska ma kierunek blokowy w dół. Kierunek blokowy można ustawić za pomocą atrybutu CSS: writing-mode zdefiniować.

Pozycja przyciągania to pozycja, w której podelement przyciąga się do miejsca w kontenerze, gdy zatrzymujesz przewijanie.

Uwaga:Ten atrybut działa tylko w kierunku blokowym:scroll-snap-align Działa, gdy atrybut ustawiony jest na 'start' lub 'end'.

scroll-padding-block Atrybut jest skróconą wersją następujących atrybutów:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block Wartość atrybutu można ustawić na różne sposoby:

Jeśli atrybut scroll-padding-block ma dwie wartości:

scroll-padding-block: 10px 50px;

• Odległość od początku wynosi 10px
• Odległość od końca wynosi 50px

Jeśli atrybut scroll-padding-block ma wartość:

scroll-padding-block: 10px;

• Odległość od początku i końca wynosi 10px

Aby zobaczyć scroll-padding-block Efekt atrybutu musi być ustawiony na podelementach scroll-snap-align ustawienie scroll-padding-block i Atrybut, i scroll-snap-type

Atrybut scroll-padding-block i scroll-padding-inline CSS Atrybut scroll-padding-top w CSSscroll-padding-bottomAtrybuty są podobne do atrybutów CSSscroll-padding-bottom, i scroll-padding-left scroll-padding-right scroll-padding-block i scroll-padding-inline Atrybut zależy od kierunku blokowego i kierunku wewnętrznego.

Przykład

Przykład 1

W kierunku blokowym ustawia wewnętrzną margines przewijania na 20px od kontenera do miejsca przyciągania:

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

Spróbuj sam

Przykład 2: Biblioteka obrazów

scroll-padding-block Atrybut można użyć w galeriach z zachowaniem przyciągania, aby przeciągnąć obrazy pod stały element:

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

Spróbuj sam

Przykład 3

Kiedy element kontenera writing-mode Kiedy wartość atrybutu ustawiona jest na vertical-rl, początkowe położenie kontenera i jego potomków w kierunku blokowym przenosi się z góry na prawo, a końcowe położenie z dołu na lewo. To wpływa na zachowanie przyciągania do paska nawigacyjnego oraz scroll-padding-block Sposób działania atrybutu:

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

Spróbuj sam

Gramatyka CSS

scroll-padding-block: 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 związane

Wskazówka:Atrybut scroll-padding-block-end w CSS

Wskazówka:Atrybut scroll-padding-block-start w CSS

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

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

Wskazówka:Atrybut writing-mode w CSS