Görgetés-bepattintás - CSS-trükkök

Anonim

scroll-snap-stopa CSS Scroll Snap modul része. A görgetés bepattintása a nézet pozíciójának „rögzítésére” utal az oldal egyes elemeihez, amikor az ablak (vagy egy görgethető tároló) görgetésre kerül. Gondoljon egy görgetésre kattintó tárolóra, például mágnest rakjon egy elem tetejére, amely a nézetablak tetejére tapad, és arra kényszeríti az oldalt, hogy hagyja abba a görgetést.

scroll-snap-stopa görgetés-bepattintási elem opcionális tulajdonsága. A görgetéssel bepattintható tárolókkal kapcsolatos további információkért lásd az scroll-snap-typealmanach bejegyzést.

scroll-snap-stoplehetővé teszi, hogy a görgetésre kattintó tárolót egy adott elemhez csattanjon. Tegyük fel, hogy egy tekercs-bepattintó konténerben görgetett, és egy hatalmas egérgombot adott neki. Normális esetben a böngésző hagyta, hogy a görgetés sebessége átrepüljön a rögzítési pontok mellett, amíg egy olyan rögzítési pontra telepedik, amely közel van a görgetés normál végéhez. A beállítással scroll-snap-stopelmondhatja a böngészőnek, hogy le kell állnia egy adott elemen, mielőtt engedélyezné a felhasználót.

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

Szintaxis

scroll-snap-stop: normal | always;

Értékek

scroll-snap-stop a következő értékeket fogadja el:

  • normal az alapértelmezett érték, és lehetővé teszi, hogy egy elem elgördüljön anélkül, hogy bepattanna
  • always arra kényszeríti a böngészőt, hogy rákattintjon erre az elemre, még akkor is, ha a görgetés általában elhalad ezen az elemen

Példa

Lásd a
CSS-Tricks (@ css-tricks) Toll görgetés-bepattintás példáját a CodePen-en.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
69 68 11 * 79 11.

Mobil / Tablet

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

Ne feledje, hogy a Chrome scroll-snap-stop: always;jelenleg nem támogatható .

Összefüggő

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

Erőforrások

  • CSS Scroll Snap W3C jelöltajánlás
  • Praktikus CSS Scroll Snapping
  • Bemutatjuk a CSS Scroll Snap Pontokat