Atrybut scroll-padding-inline-start w CSS

definicja i użycie

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

To oznacza, ż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 wierszu w stosunku do istniejącego znaku, co jest również sposobem ustawienia layoutu etykiet (takich jak <a> i <strong>) w tekście. Kierunek wewnętrzny zależy od języka pisma, na przykład nowe znaki arabskie są ustawiane w kierunku z prawej na lewą, więc kierunek wewnętrzny jest z prawej na lewą, podczas gdy kierunek wewnętrzny strony angielskiej jest z lewej na prawą. Kierunek wewnętrzny można ustawić za pomocą atrybutu CSS direction i writing-mode definicja.

Pozycja przyciągania to pozycja, w której element potomny przyciąga się do położenia w kontenerze, gdy zatrzymujesz przewijanie.

Uwaga:Ta właściwość jest ustawiona tylko w kierunku wewnętrznym scroll-snap-align atrybut jest ustawiony na 'start', zaczyna działać.

zobaczyć scroll-padding-inline-start atrybut, aby zobaczyć jego efekt, musi być ustawiony na elemencie potomnym scroll-snap-align atrybut, i ustawia się go na elemencie nadrzędnym scroll-padding-inline-start i scroll-snap-type Atrybut.

Przykład

Przykład 1

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

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

Spróbuj sam

Przykład 2: Biblioteka obrazów

scroll-padding-inline-start Atrybut może być używany w galeriach z zachowaniem przyciągania, aby wyrzucić obrazy za stały element:

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

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 góry na prawo. To wpływa na zachowanie przyciągania do paska rolki oraz scroll-padding-inline-start Sposób działania atrybutu:

#container {
  scroll-padding-inline-start: 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ą, a końcowe położenie przenosi się z prawej strony na dolną. To wpływa na zachowanie przyciągania do paska rolki oraz scroll-padding-inline Sposób działania atrybutu:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Szczegóły techniczne

Obsługa przeglądarek

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

Strony związane

Odnośnik:Atrybut direction w CSS

Odnośnik:Atrybut scroll-snap-align w CSS

Odnośnik:Atrybut scroll-snap-type w CSS

Odnośnik:Atrybut writing-mode w CSS