Vierityspainike - CSS-temppuja

Anonim

scroll-snap-stopon osa CSS Scroll Snap -moduulia. Vierityksen napsautus tarkoittaa näkymän sijainnin lukitsemista sivun tiettyihin elementteihin, kun ikkunaa (tai vieritettävää säilöä) vieritetään. Ajattele vierityspainiketta, kuten magneetin asettaminen elementin päälle, joka tarttuu näkymän yläosaan ja pakottaa sivun lopettamaan vierityksen siellä.

scroll-snap-stopon valinnainen ominaisuus vierityksen napsauttavalle elementille vierityksen napsautussäiliössä. Lisätietoja vierityspainikkeista on scroll-snap-typealmanakka-merkinnässä.

scroll-snap-stopvoit pakottaa vierityspainikkeen napsauttamaan tiettyyn elementtiin. Oletetaan, että vieritit vierityspainikkeen sisällä ja annoit sille valtavan hiiripyörän. Normaalisti selain antoi selaamisen nopeuden lentää napsautuspisteiden ohi, kunnes se laskeutui napsautuskohtaan lähellä paikkaa, jossa vieritys normaalisti loppuisi. Asettamalla scroll-snap-stopvoit kertoa selaimelle, että sen on pysähdyttävä tietyssä elementissä, ennen kuin käyttäjä antaa sen ohittaa.

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

Syntaksi

scroll-snap-stop: normal | always;

Arvot

scroll-snap-stop hyväksyy seuraavat arvot:

  • normal on oletusarvo ja sallii elementin vierityksen ohi napsauttamatta
  • always pakottaa selaimen napsahtamaan tähän elementtiin, vaikka vieritys normaalisti menisi tämän elementin ohi

Esimerkki

Katso
CSS-Tricksin (@ css-tricks) kynän vieritys-napsautus-pysäytysesimerkki CodePenistä.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
69 68 11 * 79 11

Matkapuhelin / tabletti

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

Huomaa, että Chrome ei ehkä tue scroll-snap-stop: always;tällä hetkellä.

Liittyvät

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

Resurssit

  • CSS Scroll Snap W3C -ehdokkaiden suositus
  • Käytännöllinen CSS-vierityksen napsautus
  • Esittelyssä CSS Scroll Snap Points -pisteet