Scroll-snap-stop - CSS-Tricks

Anonim

scroll-snap-stopface parte din CSS Scroll Snap Module. 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 un container cu defilare, ca și cum ați pune un magnet deasupra unui element care se lipeste de partea de sus a ferestrei și forțează pagina să nu mai deruleze chiar acolo.

scroll-snap-stopeste o proprietate opțională pentru un element de derulare în cadrul unui container de derulare. Pentru mai multe informații despre containerele cu defilare, consultați scroll-snap-typeintrarea almanahului.

scroll-snap-stopvă permite să forțați containerul derulant să se fixeze la un anumit element. Să presupunem că derulați într-un container de derulare și i-ați dat o rotire gigantică a mouse-ului. În mod normal, browserul ar lăsa viteza derulării să zboare peste punctele de prindere până când s-a așezat într-un punct de prindere aproape de locul în care se va termina în mod normal derularea. Prin setare, scroll-snap-stopputeți spune browserului că trebuie să se oprească pe un anumit element înainte de a permite utilizatorului să treacă de el.

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

Sintaxă

scroll-snap-stop: normal | always;

Valori

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

  • normal este valoarea implicită și permite derularea unui element fără a se fixa
  • always va forța browserul să se fixeze la acest element, chiar dacă defilarea ar trece în mod normal peste acest element

Exemplu

Vedeți exemplul Pen scroll-snap-stop
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

Rețineți că este posibil ca Chrome să nu accepte scroll-snap-stop: always;momentan.

Legate de

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

Resurse

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