scroll-timeline

Description
Syntax
Examples
Links

Description

The scroll-timeline property for CSS shorthand for scroll-timeline-name and scroll-timeline-axis.

Syntax

CSS

scroll-timeline: value;

JS

object.style.scrollTimeline = "value";

Values

<'scroll-timeline'> = [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#

<'scroll-timeline-name'> = none | <custom-ident>#

none

The scroll container does not have a name.

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<'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.

<!doctype html>
<html>
<head>
    <style>
        @keyframes mykeyframes
        {
            0%
            {
                background-color: red;
            }
            100%
            {
                background-color: blue;
            }
        }
        .myclass
        {
            height: 50vh;
            overflow: scroll;
            width: 50vw;

div
            {
                animation-duration: 1s;
                animation-name: mykeyframes;
                animation-timeline: mytimeline;
                height: 100vh;
                width: 100vw;
            }
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>none</button>
    <button value="mytimeline">custom-ident</button>
    <div class="myclass">
        <div>scroll-timeline-name</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector(".myclass").style.scrollTimelineName = myproperty + " inline";
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

4 · scroll-timeline-axis · block

5 · scroll-timeline-axis · inline

6 · scroll-timeline-axis · vertical

7 · scroll-timeline-axis · horizontal

8 · scroll-timeline-axis · JS

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

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 = "mytimeline" + myparameter.target.innerHTML;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>