scroll-timeline-axis

Description
Syntax
Examples
Links

Description

The scroll-timeline-axis property for CSS specifies an axis for each scroll progress timeline associated with this scroll container.

Syntax

CSS

scroll-timeline-axis: value;

JS

object.style.scrollTimelineAxis = "value";

Values

<'scroll-timeline-axis'> = [ block | inline | vertical | horizontal ]#

block

Specifies to use the measure of progress along the block axis of the scroll container.

inline

Specifies to use the measure of progress along the inline axis of the scroll container.

vertical

Specifies to use the measure of progress along the vertical axis of the scroll container.

horizontal

Specifies to use the measure of progress along the horizontal axis of the scroll container.

Initial

block

<!doctype html>
<html>
<head>
    <style>
        @keyframes mykeyframes
        {
            0%
            {
                background-color: red;
            }
            100%
            {
                background-color: blue;
            }
        }
        .myclass
        {
            height: 50vh;
            overflow: scroll;
            scroll-timeline-name: mytimeline;
            width: 50vw;
        }
        .myclass > div
        {
            animation-duration: 1s;
            animation-name: mykeyframes;
            animation-timeline: mytimeline;
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>block</button>
    <button>inline</button>
    <button>vertical</button>
    <button>horizontal</button>
    <div class="myclass">
        <div>scroll-timeline-axis</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector(".myclass").style.scrollTimelineAxis = myparameter.target.innerHTML;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>