The scroll-snap-type CSS property specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered.
If no strictness value is specified, proximity is assumed.
CSS
JS
object.style.scrollSnapType = "value";
Values
<'scroll-snap-type'> = none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
none
The scroll container must not snap.
x
The scroll container snaps to snap positions in its horizontal axis only.
y
The scroll container snaps to snap positions in its vertical axis only.
block
The scroll container snaps to snap positions in its block axis only.
inline
The scroll container snaps to snap positions in its inline axis only.
both
The scroll container snaps to snap positions in both of its axes independently.
mandatory
The scroll container is required to be snapped to a snap position when there are no active scrolling operations.
proximity
The scroll container may snap to a snap position at the termination of a scroll, at the discretion of the user agent given the parameters of the scroll.
Initial
none
x
<!doctype html>
<html>
<head>
<style>
#myid {
display: grid;
grid-template-columns: repeat(3, 100%);
grid-template-rows: repeat(3, 100%);
height: 50%;
overflow: scroll;
scroll-snap-type: x;
width: 50%;
}
#myid > div {
background-image: linear-gradient(135deg, white, gray);
scroll-snap-align: start;
}
</style>
</head>
<body>
<div id="myid">
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
<div>x</div>
</div>
</body>
</html>
y
<!doctype html>
<html>
<head>
<style>
#myid {
display: grid;
grid-template-columns: repeat(3, 100%);
grid-template-rows: repeat(3, 100%);
height: 50%;
overflow: scroll;
scroll-snap-type: y;
width: 50%;
}
#myid > div {
background-image: linear-gradient(135deg, white, gray);
scroll-snap-align: start;
}
</style>
</head>
<body>
<div id="myid">
<div>y</div>
<div>y</div>
<div>y</div>
<div>y</div>
<div>y</div>
<div>y</div>
<div>y</div>
<div>y</div>
<div>y</div>
</div>
</body>
</html>
block
<!doctype html>
<html>
<head>
<style>
#myid {
display: grid;
grid-template-columns: repeat(3, 100%);
grid-template-rows: repeat(3, 100%);
height: 50%;
overflow: scroll;
scroll-snap-type: block;
width: 50%;
}
#myid > div {
background-image: linear-gradient(135deg, white, gray);
scroll-snap-align: start;
}
</style>
</head>
<body>
<div id="myid">
<div>block</div>
<div>block</div>
<div>block</div>
<div>block</div>
<div>block</div>
<div>block</div>
<div>block</div>
<div>block</div>
<div>block</div>
</div>
</body>
</html>
inline
<!doctype html>
<html>
<head>
<style>
#myid {
display: grid;
grid-template-columns: repeat(3, 100%);
grid-template-rows: repeat(3, 100%);
height: 50%;
overflow: scroll;
scroll-snap-type: inline;
width: 50%;
}
#myid > div {
background-image: linear-gradient(135deg, white, gray);
scroll-snap-align: start;
}
</style>
</head>
<body>
<div id="myid">
<div>inline</div>
<div>inline</div>
<div>inline</div>
<div>inline</div>
<div>inline</div>
<div>inline</div>
<div>inline</div>
<div>inline</div>
<div>inline</div>
</div>
</body>
</html>
both
<!doctype html>
<html>
<head>
<style>
#myid {
display: grid;
grid-template-columns: repeat(3, 100%);
grid-template-rows: repeat(3, 100%);
height: 50%;
overflow: scroll;
scroll-snap-type: both;
width: 50%;
}
#myid > div {
background-image: linear-gradient(135deg, white, gray);
scroll-snap-align: start;
}
</style>
</head>
<body>
<div id="myid">
<div>both</div>
<div>both</div>
<div>both</div>
<div>both</div>
<div>both</div>
<div>both</div>
<div>both</div>
<div>both</div>
<div>both</div>
</div>
</body>
</html>
mandatory
<!doctype html>
<html>
<head>
<style>
#myid {
display: grid;
grid-template-columns: repeat(3, 100%);
grid-template-rows: repeat(3, 100%);
height: 50%;
overflow: scroll;
scroll-snap-type: both mandatory;
width: 50%;
}
#myid > div {
background-image: linear-gradient(135deg, white, gray);
scroll-snap-align: start;
}
</style>
</head>
<body>
<div id="myid">
<div>mandatory</div>
<div>mandatory</div>
<div>mandatory</div>
<div>mandatory</div>
<div>mandatory</div>
<div>mandatory</div>
<div>mandatory</div>
<div>mandatory</div>
<div>mandatory</div>
</div>
</body>
</html>
proximity
<!doctype html>
<html>
<head>
<style>
#myid {
display: grid;
grid-template-columns: repeat(3, 100%);
grid-template-rows: repeat(3, 100%);
height: 50%;
overflow: scroll;
scroll-snap-type: both proximity;
width: 50%;
}
#myid > div {
background-image: linear-gradient(135deg, white, gray);
scroll-snap-align: start;
}
</style>
</head>
<body>
<div id="myid">
<div>proximity</div>
<div>proximity</div>
<div>proximity</div>
<div>proximity</div>
<div>proximity</div>
<div>proximity</div>
<div>proximity</div>
<div>proximity</div>
<div>proximity</div>
</div>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
#myid {
display: grid;
grid-template-columns: repeat(3, 100%);
grid-template-rows: repeat(3, 100%);
height: 50%;
overflow: scroll;
width: 50%;
}
#myid > div {
background-image: linear-gradient(135deg, white, gray);
scroll-snap-align: start;
}
</style>
<script>
function mouseover(value) {
document.getElementById("myid").style.scrollSnapType = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="none">
<input onmouseover="mouseover(value)" type="button" value="x">
<input onmouseover="mouseover(value)" type="button" value="y">
<input onmouseover="mouseover(value)" type="button" value="block">
<input onmouseover="mouseover(value)" type="button" value="inline">
<input onmouseover="mouseover(value)" type="button" value="both"><br>
<button onmouseover="mouseover(value)" value="both mandatory">mandatory</button>
<button onmouseover="mouseover(value)" value="both proximity">proximity</button>
<div id="myid">
<div>scroll-snap-type</div>
<div>scroll-snap-type</div>
<div>scroll-snap-type</div>
<div>scroll-snap-type</div>
<div>scroll-snap-type</div>
<div>scroll-snap-type</div>
<div>scroll-snap-type</div>
<div>scroll-snap-type</div>
<div>scroll-snap-type</div>
</div>
</body>
</html>
Internal
External