Scroll-snap-type - CSS-Tricks

Anonim

scroll-snap-typeProprietatea este parte a CSS Scroll Ajustare modulul. Ajustarea derulării se referă la „blocarea” poziției ferestrei de vizualizare la anumite elemente de pe pagină, pe măsură ce fereastra (sau un container rulabil) este derulată. Gândiți-vă la asta ca la punerea unui magnet deasupra unui element care se lipeste de partea de sus a ferestrei și obligă pagina să nu mai deruleze chiar acolo.

Acest lucru este util dacă doriți să opriți browserul în anumite puncte de pe pagină. De exemplu: un utilizator care navighează într-o galerie foto probabil că nu dorește să deruleze la jumătatea imaginii - ar prefera să aibă imaginea „fixată” în poziția corectă în timp ce derulează. Funcția de defilare oferă dezvoltatorilor un mod CSS pur de a gestiona acest comportament.

scroll-snap-typeeste o proprietate obligatorie pentru orice container care poate fi derulat la care doriți să adăugați derulare. Acesta răspunde la trei întrebări pentru un container scroll:

  1. Containerul folosește scroll snapping?
  2. Pe ce axă - x (orizontală), y (verticală), bloc sau în linie - ar trebui să se aplice fixarea derulării?
  3. Cum ar trebui să se comporte derularea decupării? Este forțat 100% din timp sau are efect numai atunci când utilizatorul ajunge „suficient de aproape” de o poziție instantanee? Mai multe despre asta mai târziu.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Sintaxă

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

Valori

scroll-snap-type acceptă următoarele valori:

  • none dezactivează fixarea derulării.
  • x permite doar derularea de-a lungul axei x.
  • y permite derularea de-a lungul axei y.
  • block permite derularea de-a lungul axei bloc.
  • inline permite derularea de-a lungul axei în linie.
  • bothpermite derularea de-a lungul ambelor axe (la care vă puteți gândi ca xși y, sau inlineși block.
  • mandatory este o valoare de strictețe care îi spune browserului să meargă întotdeauna într-o poziție instantanee atunci când nu se derulează.
  • proximityeste o valoare de strictețe care îi spune browserului să meargă într-o poziție snap dacă o acțiune de derulare se apropie destul de mult de o poziție snap. Dacă nu este destul de aproape, atunci browserul nu ar trebui să se prindă și derularea se va comporta normal.

Exemplu

Vedeți exemplul Pen scroll-snap-type
de CSS-Tricks (@ css-tricks) pe CodePen.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
69 68 11 * 79 11

Mobil / Tabletă

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

Legate de

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Resurse

  • Recomandarea candidatului CS3 Scroll Snap W3C
  • Practic CSS Scroll Snapping
  • Vă prezentăm CSS Scroll Snap Points