Slinkti-spustelėti-sustabdyti - CSS-gudrybės

Anonim

scroll-snap-stopyra CSS „Scroll Snap“ modulio dalis. Slinkties užfiksavimas reiškia peržiūros srities „užrakinimą“ tam tikriems puslapio elementams, kai slenkamas langas (arba slenkamas konteineris). Pagalvokite apie slinkimo spragtelėjimą, pavyzdžiui, ant elemento, kuris prilimpa prie peržiūros srities viršaus ir priverčia puslapį nustoti slinkti tiesiai, ant magneto.

scroll-snap-stopyra pasirenkama slinkimo elemento ypatybė slinkties spragtelėjimo talpykloje. Norėdami gauti daugiau informacijos apie slinkimo konteinerius, žr. scroll-snap-typeAlmanacho įrašą.

scroll-snap-stopleidžia priversti slinkti užfiksuotą konteinerį užfiksuoti konkretų elementą. Tarkime, kad slinkote slinkties konteineryje ir davėte jai milžinišką sukamą pelės ratuką. Paprastai naršyklė leis jūsų slinkimo greičiui praskristi už fiksavimo taškų, kol jis nusistovės taške, esančiame netoli tos vietos, kur slinkimas paprastai baigsis. Nustatydami scroll-snap-stopgalite naršyklei pasakyti, kad jis turi sustoti prie tam tikro elemento, prieš leisdamas vartotojui jį praleisti.

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

Sintaksė

scroll-snap-stop: normal | always;

Vertybės

scroll-snap-stop priima šias vertes:

  • normal yra numatytoji reikšmė ir leidžia elementą slinkti pro šalį, neužfiksuojant
  • always privers naršyklę spustelėti šį elementą, net jei slinktis paprastai praeis pro šį elementą

Pavyzdys

Peržiūrėkite
„CSS-Tricks“ („@ css-tricks“) „Pen“ slinkimo ir sustabdymo pavyzdį „CodePen“.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
69 68 11 * 79 11

Mobilusis / planšetinis kompiuteris

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

Atminkite, kad „Chrome scroll-snap-stop: always;“ šiuo metu gali nepalaikyti .

Susijęs

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

Ištekliai

  • CSS „Scroll Snap W3C“ kandidato rekomendacija
  • Praktinis CSS slinkties fiksavimas
  • Pristatome CSS slinkties taškus