scroll-snap-type

Description
Syntax
Examples
Links

Description

The scroll-snap-type property for CSS 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>
        .myclass
        {
            display: grid;
            grid-template-columns: repeat(3, 100%);
            grid-template-rows: repeat(3, 100%);
            height: 50vh;
            overflow: scroll;
            width: 50%;
        }
        .myclass > div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            scroll-snap-align: start;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>none</button>
    <button>x</button>
    <button>y</button>
    <button>block</button>
    <button>inline</button>
    <button>both</button>
    <button value="both mandatory">mandatory</button>
    <button value="both proximity">proximity</button>
    <div class="myclass">
        <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>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector(".myclass").style.scrollSnapType = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>