Atrybut scroll-padding w CSS

Definicja i zastosowanie

scroll-padding Właściwość określa odległość od kontenera do pozycji przyciągania pod-elementu.

To oznacza, że po zatrzymaniu przeciągania, przewijanie szybko dostosowuje się i zatrzymuje w odległości określonej od kontenera do pozycji przyciągania pod-elementu.

Pozycja przyciągania to pozycja, w której pod-element w kontenerze jest przymocowany, gdy element przestaje się przeciągać.

scroll-padding Właściwość jest skróconą wersją poniższych właściwości:

scroll-padding Wartości właściwości można ustawić na różne sposoby:

Jeśli właściwość scroll-padding ma cztery wartości:

scroll-padding: 15px 30px 60px 90px;
  • Distansy górnej krawędzi wynoszą 15px
  • Distansy prawej krawędzi wynoszą 30px
  • Distansy dolnej krawędzi wynoszą 60px
  • Distansy lewej krawędzi wynoszą 90px

Jeśli właściwość scroll-padding ma trzy wartości:

scroll-padding: 15px 30px 60px;
  • Distansy górnej krawędzi wynoszą 15px
  • odległość po lewej i prawej stronie wynosi 30px
  • Distansy dolnej krawędzi wynoszą 60px

Jeśli właściwość scroll-padding ma dwie wartości:

scroll-padding: 15px 30px;
  • Distansy między górnym i dolnym krawędziami wynoszą 15px
  • odległość po lewej i prawej stronie wynosi 30px

Jeśli atrybut scroll-padding ma jedną wartość:

scroll-padding: 10px;
  • odległości we wszystkich czterech kierunkach wynoszą 10px

aby zobaczyć scroll-padding atrybut na elemencie nadrzędnym, efekt tych atrybutów musi być ustawiony na elemencie potomnym, aby zobaczyć scroll-snap-align atrybut, oraz ustawienie scroll-padding i scroll-snap-type atrybut.

Uwaga:W poniższym przykładzie ustawiono margines wewnętrzny na wszystkie strony, ale ze względu na scroll-snap-align Ustaw na "start", więc zmienia się tylko margines wewnętrzny górnej krawędzi i zmienia zachowanie przewijania.

Przykład

Przykład 1

Ustaw margines wewnętrzny od kontenera do przyciągającego miejsca na 20px:

div {
  scroll-padding: 20px;
}

Spróbuj sam

Przykład 2: Biblioteka obrazów

scroll-padding Atrybut może być użyty w galeriach z zachowaniem przyciągania, aby przeciągnąć obraz pod stały element:

#container {
  scroll-padding: 30px 0 0 0;
}
Stały element na górze
Pekin Tancerz Wuhan Tulipan Hangzhou

Spróbuj sam

Przykład 3: Ustawienie marginesu wewnętrznego w dolnej i prawej stronie

scroll-padding Atrybut może być ustawiony zarówno na dole, jak i na prawo kontenera. Przesuń poziomo i pionowo do następnego elementu, aby zobaczyć efekt:

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





Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
auto Domyślna wartość. Przeglądarka oblicza margines wewnętrzny.
length

Określ margines wewnętrzny w jednostkach takich jak px, pt, cm.

Nie można używać ujemnych wartości. Zobacz:Jednostki CSS.
% Określ procentową margines wewnętrzny względem szerokości kontenera.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Inherduje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: auto
Inherdencja: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.scrollPadding="20px"

Wsparcie przeglądarki

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Powiązane strony

Odnośnik:Atrybut scroll-padding-bottom w CSS

Odnośnik:Atrybut scroll-padding-left w CSS

Odnośnik:Atrybut scroll-padding-right w CSS

Odnośnik:Atrybut scroll-padding-top w CSS

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

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