Scroll-snap-stop - CSS-Tricks

Anonim

scroll-snap-stopjest 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-snap-stopjest 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.

scroll-snap-stopumożliwia wymuszenie przyciągania kontenera do przewijania do określonego elementu. Przypuśćmy, że przewijasz zawartość pojemnika z funkcją łamania zwojów i nadałeś mu gigantyczny obrót kółka myszy. Zwykle przeglądarka pozwalałaby, aby prędkość przewijania przeleciała przez punkty przyciągania, aż osiadła w punkcie przyciągania blisko miejsca, w którym przewijanie normalnie by się zakończyło. Ustawiając scroll-snap-stop, możesz powiedzieć przeglądarce, że musi zatrzymać się na określonym elemencie, zanim zezwolisz użytkownikowi na przejście.

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-stop: always; )

Składnia

scroll-snap-stop: normal | always;

Wartości

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

  • normal jest wartością domyślną i umożliwia przewijanie elementu bez przyciągania
  • always zmusi przeglądarkę do przyciągnięcia do tego elementu, nawet jeśli przewijanie normalnie przechodzi poza ten element

Przykład

Zobacz przykład przewijania i zatrzaskiwania pióra
autorstwa 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

Pamiętaj, że Chrome może obecnie nie obsługiwać scroll-snap-stop: always;.

Związane z

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Zasoby

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