Scroll-margin - CSS-Tricks

Anonim

scroll-marginjest 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-marginjest opcjonalną właściwością elementu przyciągającego przewijanie w kontenerze przyciągającym do przewijania. Więcej informacji na temat kontenerów z scroll-snap-typefunkcją przewijania można znaleźć we wpisie almanachu.

Wprowadź margines przewijania

scroll-marginsłuży do dopasowania obszaru przyciągania elementu (pola określającego miejsce, w którym element zostanie przyciągnięty). Dodawanie scroll-marginjest przydatne, gdy trzeba nadać elementowi odstęp od krawędzi kontenera po jego zatrzaśnięciu, ale pozwala na sytuacje, w których każdy element może wymagać nieco innego odstępu. Jeśli wszystkie elementy mają takie same wymagania dotyczące odstępów, rozważ użycie scroll-paddingw kontenerze nadrzędnym zamiast, scroll-marginponieważ wpływa to na odstępy dla wszystkich elementów w kontenerze.

Prosty przykład, w którym scroll-marginpozwala na odstęp 50px wokół górnej i lewej części elementu, wygląda następująco:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Różowy obszar reprezentuje scroll-marginna tym elemencie.

Składnia

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

Ważna uwaga na temat długich dłoni: Chrome (i prawdopodobnie inne przeglądarki) obecnie nie obsługują formatu scroll-paddingi scroll-marginwłaściwości podrę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-marginprzyjmuje następujące długości wartość, która opisana podobna do margini innych właściwości, gdy wartość ta może być określona z jednostek ( px, em, vhitp). Aby uzyskać więcej informacji, zobacz Moduł wartości i jednostek W3C. Nie można używać wartości procentowych scroll-marginzgodnie ze specyfikacją.

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