Atrybut scroll-padding-inline-end w CSS

Definicja i użycie

scroll-padding-inline-end Atrybut określa odległość między końcem kontenera a pozycją wyrównania podelementu w kierunku wiersza.

Oznacza to, że po zatrzymaniu przewijania, przewijanie szybko dostosuje się i zatrzyma się na odległości określonej między pozycją wyrównania a kontenerem.

Kierunek wiersza to kierunek umieszczania następnego znaku w stosunku do istniejącego znaku w wierszu, co jest również sposobem układu etykiet z CSS display: inline; (np. <a> i <strong> etykiety) w tekście. Kierunek wiersza zależy od języka pisma, na przykład nowe znaki arabskie są ustawiane w prawo do lewej, więc kierunek wiersza jest z prawej do lewej, podczas gdy kierunek wiersza na stronie angielskiej jest z lewej do prawej. Kierunek wiersza można zmienić za pomocą atrybutu CSS direction i writing-mode Definicja.

Położenie wyrównania to pozycja, w której podelementy są wyrównane w kontenerze po zatrzymaniu przewijania.

Uwaga:Ten atrybut jest dostępny tylko w scroll-snap-align Atrybut działa tylko wtedy, gdy ustawienie kierunku wiersza wynosi 'end'.

aby zobaczyć scroll-padding-inline-end muszą być ustawione na elementach potomnych, scroll-snap-align Atrybut, a efekty ustawienia atrybutu scroll-padding-inline-end i scroll-snap-type Atrybut.

Przykład

Przykład 1

Ustaw wewnętrzną margines wewnętrzny w kierunku wewnętrznym od końca kontenera do pozycji aliningu na 20px:

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

Spróbuj sam

Przykład 2: biblioteka obrazów

scroll-padding-inline-end Atrybut można używać w galeriach z zachowaniem aliningu, aby wyrzucić obrazy za stały element:

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

Spróbuj sam

Przykład 3

Kiedy element kontenera writing-mode Kiedy wartość atrybutu ustawiona jest na 'vertical-rl', początki i końce kontenera i jego elementów podrzędnych przenoszą się z lewej strony na górę, a z prawej strony na dół w kierunku wewnętrznym. To wpływa na zachowanie aliningu podczas przewijania oraz scroll-padding-inline-end Sposób działania atrybutu:

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

Spróbuj sam

Przykład 4

Kiedy element kontenera direction Kiedy wartość atrybutu ustawiona jest na 'rtl', krawędzie końcowe kontenera i jego elementów podrzędnych przenoszą się z prawej strony na lewą w kierunku wewnętrznym. To wpływa na zachowanie aliningu podczas przewijania oraz scroll-padding-inline-end Sposób działania atrybutu:

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

Spróbuj sam

Język CSS

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

Wartość atrybutu

Szczegóły techniczne

Wspieranie przeglądarek

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

powiązane strony

Wskazówka:Atrybut direction 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