Scroll-snap-type - CSS-Tricks

Anonim

scroll-snap-typeNieruchomość jest częścią CSS przewijania Snap modułu. 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 tym jak o umieszczeniu magnesu na elemencie, który przyczepia się do górnej części widoku i zmusza stronę do zatrzymania przewijania w tym miejscu.

Jest to przydatne, jeśli chcesz zatrzymać przeglądarkę w określonych miejscach na stronie. Na przykład: użytkownik przeglądający galerię zdjęć prawdopodobnie nie chce przewijać w połowie obrazu - prawdopodobnie wolałby, aby obraz „przyciągał” do właściwej pozycji podczas przewijania. Przyciąganie do przewijania umożliwia programistom obsługę tego zachowania w czystym CSS.

scroll-snap-typeto wymagana właściwość w każdym przewijalnym kontenerze, do którego chcesz dodać funkcję przewijania. Odpowiada na trzy pytania dotyczące kontenera przewijania:

  1. Czy kontener używa przyciągania przewijania?
  2. Na której osi - x (pozioma), y (pionowa), blok czy w wierszu - ma obowiązywać przyciąganie przewijania?
  3. Jak powinno zachowywać się przyciąganie do przewijania? Czy jest to wymuszane w 100% przypadków, czy też działa tylko wtedy, gdy użytkownik zbliży się „dostatecznie” do pozycji zatrzaskowej? Więcej o tym później.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Składnia

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Wartości

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

  • none wyłącza przyciąganie do przewijania.
  • x włącza przyciąganie do przewijania tylko wzdłuż osi X.
  • y włącza przyciąganie do przewijania tylko wzdłuż osi y.
  • block włącza przyciąganie przewijania tylko wzdłuż osi bloku.
  • inline włącza przyciąganie przewijania tylko wzdłuż osi liniowej.
  • bothumożliwia przyciąganie do przewijania wzdłuż obu osi (które można traktować jako xi y, lub inlinei block.
  • mandatory to wartość ścisłości, która mówi przeglądarce, aby zawsze przechodziła do pozycji przyciągania, gdy nie ma przewijania.
  • proximityto wartość ścisłości, która mówi przeglądarce, aby przechodziła do pozycji przyciągania, jeśli przewijanie zbliża się do pozycji przyciągania. Jeśli nie jest całkiem blisko, przeglądarka nie powinna się przyciągać, a przewijanie będzie działać normalnie.

Przykład

Zobacz przykład przewijania i przyciągania 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

Związane z

  • scroll-padding
  • 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