Atrybut scroll-padding-inline w CSS

Definicja i użycie

scroll-padding-inline Atrybut określa odległość od kontenera do pozycji przyciągania elementu potomnego w kierunku wewnętrznym.

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

Kierunek wewnętrzny to kierunek umieszczania następnego znaku w stosunku do istniejących znaków w wierszu. Jest to sposób布局 w tekście etykiet z CSS display: inline; (np. <a> i <strong> etykiety). Kierunek wewnętrzny zależy od języka pisania, na przykład znaki arabskie są uporządkowane od prawej do lewej, co sprawia, że kierunek wewnętrzny wynosi od prawej do lewej, podczas gdy strony angielskie mają kierunek wewnętrzny od lewej do prawej. Kierunek wewnętrzny można ustawić za pomocą atrybutu CSS direction i writing-mode zdefiniować.

Pozycja przyciągania to pozycja, w której element potomny przyciąga się do kontenera, gdy zatrzymujesz przewijanie.

Uwaga:Ten atrybut działa tylko w kierunku wewnętrznymscroll-snap-align Działa tylko gdy wartość atrybutu ustawiona jest na 'start' lub 'end'.

Atrybut scroll-padding-inline jest skrótem dla następujących atrybutów:

• scroll-padding-inline-start
• scroll-padding-inline-end

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

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

scroll-padding-inline: 10px 50px;

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

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

scroll-padding-inline: 10px;

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

aby zobaczyć scroll-padding-inline Aby zobaczyć efekty atrybutu scroll-padding-inline, musi być ustawiony na elemencie potomnym scroll-snap-align Atrybut, a efekty atrybutu scroll-snap-align muszą być ustawione na elemencie nadrzędnym scroll-padding-inline i scroll-snap-type Atrybuty.

Atrybuty CSS scroll-padding-block i scroll-padding-inline Atrybuty CSS oraz atrybuty CSS Atrybut scroll-padding-top w CSS,scroll-padding-bottom,scroll-padding-left i scroll-padding-right jest bardzo podobny, ale scroll-padding-block i scroll-padding-inline Atrybut zależy od kierunku blokowego i kierunku wewnętrznego.

Przykład

Przykład 1

Ustaw wewnętrzną margines w kierunku wewnętrznym, od kontenera do miejsca przyciągania, na 20px:

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

Spróbuj sam

Przykład 2: biblioteka obrazów

W galerii obrazów z zachowaniem przyciągania do rolki, można użyć scroll-padding-inline Atrybut wypycha obraz z tyłu stałego elementu:

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

Spróbuj sam

Przykład 3

Kiedy element kontenera writing-mode Kiedy wartość atrybutu jest ustawiona na 'vertical-rl', początkowe położenie kontenera i jego potomków w kierunku wewnętrznym przenosi się z lewej strony na górę, a końcowe położenie z prawej strony na dół. To wpływa na zachowanie przyciągania do rolki oraz scroll-padding-inline Sposób działania atrybutu:

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

Spróbuj sam

Przykład 4

Kiedy element kontenera direction Kiedy wartość atrybutu jest ustawiona na 'rtl', początkowe położenie kontenera i jego potomków w kierunku wewnętrznym przenosi się z prawej strony na lewą. To wpływa na zachowanie przyciągania do rolki oraz scroll-padding-inline Sposób działania atrybutu:

#container {
  scroll-padding-inline: 20px 0;
  direction: rtl;
}

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Szczegóły techniczne

Wsparcie przeglądarki

Liczby w tabeli reprezentują wersje przeglądarek, które w pełni obsługuje tę właściwość.

stroniczny

Odniesienie:Atrybut direction w CSS

Odniesienie:Atrybut scroll-snap-align w CSS

Odniesienie:Atrybut scroll-snap-type w CSS

Odniesienie:Atrybut writing-mode w CSS