scroll-snap-type

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.

Syntax

CSS

scroll-snap-type: value;

JS

object.style.scrollSnapType = "value";

Values

<'scroll-snap-type'> = none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

none

The scroll container must not snap.

The scroll container snaps to snap positions in its horizontal axis only.

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

<!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>

Syntax

CSS

JS

Values

Initial

Examples

none

x

y

block

inline

both

mandatory

proximity

JS

Links

Internal

External