Scroll-padding - CSS-Tricks

Anonim

scroll-paddingjest częścią modułu CSS Scroll Snap Module. Przyciąganie do przewijania odnosi się do „blokowania” pozycji rzutni do określonych elementów na stronie podczas przewijania okna (lub przewijanego kontenera). Pomyśl o kontenerze z funkcją przechwytywania przewijania, jak o umieszczeniu magnesu na elemencie, który przykleja się do górnej części widoku i zmusza stronę do zatrzymania przewijania w tym miejscu.

scroll-paddingjest opcjonalną właściwością dowolnego kontenera z funkcją przyciągania do przewijania. Kontenery z przyciąganiem do przewijania są definiowane za każdym razem, gdy scroll-snap-typewłaściwość jest ustawiona na dowolną wartość oprócz none. Więcej informacji na temat kontenerów z scroll-snap-typefunkcją przewijania można znaleźć we wpisie almanachu.

OK, więc przejdźmy do przewijania

scroll-paddingsłuży do regulacji optymalnego obszaru widzenia pojemnika zatrzaskowego. Jest to przydatne, jeśli kontener zawiera elementy, takie jak stały nagłówek, który zasłania elementy wewnątrz lub jeśli przewijalny kontener potrzebuje trochę miejsca, aby umożliwić elementom wewnętrznym oddychanie po ich „zatrzaśnięciu” na miejscu.

Prostym przykładem może być scroll-paddingutworzenie stałego odstępu 50pxw górnej i lewej części kontenera:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Obszary w kolorze różowym pokazują wypełnienie przewijania w kontenerze przyciągania do przewijania.

Składnia

/* Shorthand */ scroll-padding: ( | auto )(1,4); /* Longhands */ scroll-padding-top: | auto; scroll-padding-right: | auto; scroll-padding-bottom: | auto; scroll-padding-left: | auto; /* inline-specific and block-specific properties as well */ scroll-padding-block: ( | auto )(1,2); scroll-padding-inline: ( | auto )(1,2);

Ważna uwaga na temat długich rąk: Chrome obecnie nie obsługuje formatu scroll-paddingi scroll-marginwłaściwości odręcznych . Użyj skrótu, aby uzyskać maksymalną obsługę przeglądarki. Zobacz ten problem w narzędziu do śledzenia błędów chromu, aby uzyskać więcej informacji i aktualny stan.

Wartości

scroll-padding akceptuje następujące wartości:

  • autopozostawia wypełnienie do określenia przez przeglądarkę / klienta użytkownika. Zwykle oznacza to wartość 0px, ale może być różna od zera, jeśli agent użytkownika zdecyduje, że inna wartość jest bardziej odpowiednia.
  • opisana podobny do paddingi inne właściwości, gdy wartość można określić z jednostkami ( px, em, vh, itd.) lub jako procent samego pojemnika.

Przykład

Zobacz przykład wypełnienia przewijaniem pióra
przez CSS-Tricks (@ css-tricks) w CodePen.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
69 68 11 * 79 11

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

Związane z

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Zasoby

  • CSS Scroll Snap Rekomendacja kandydata W3C
  • Praktyczne przyciąganie przewijania CSS
  • Przedstawiamy punkty przyciągania przewijania CSS