✔️ scroll-snap-type CSS Style Property

המאפיין scroll-snap-type מציין כיצד האלמנטים ייכנסו לפוקוס כאשר תפסיק לגלול, ובאיזה כיוון.

דוגמא: הגדרת סוג snap גלילה

Demo Panel:

Item 1

Item 2

Item 3

Item 4

CSS: 111

HTML: 222

Syntax:

scroll-snap-type: none | x | y | block | inline | both | mandatory | proximity | initial | inherit;

Valid values:

none, x, y, block, inline, both, block mandatory, block proximity, both mandatory, both proximity, revert, revert-layer, unset, revert, revert-layer, unset, inherit, initial

Js Syntax: element.style.scrollSnapType

תאימות דפדפנים

scroll-snap-type
הערך שנבדק	Chrome	Firefox	EdgeC	Opera
block mandatory	✔️	✔️	✔️	✔️
none	✔️	✔️	✔️	✔️
x	✔️	✔️	✔️	✔️
y	✔️	✔️	✔️	✔️
block	✔️	✔️	✔️	✔️
inline	✔️	✔️	✔️	✔️
both	✔️	✔️	✔️	✔️
x mandatory	✔️	✔️	✔️	✔️
y proximity	✔️	✔️	✔️	✔️
both mandatory	✔️	✔️	✔️	✔️
revert	✔️	✔️	✔️	✔️
revert-layer	✔️	✔️	✔️	✔️
unset	✔️	✔️	✔️	✔️
inherit	✔️	✔️	✔️	✔️
initial	✔️	✔️	✔️	✔️