Benannte Scrollleiste

Das Beispiel funtioniert nicht in Firefox

In diesem Beispiel geht es darum, dass man die Scrollleiste irgendeines HTML-Elements verwenden kann, um irgendein anderes Element damit zu animieren.

Das macht man mit benannten Scrollleisten. Wichtig ist, dass das Element welches animiert werden soll, ein Nachfahre des Elements sein muss, dessen Scrollleiste verwendet wird.

Das Element dessen Scrollleiste verwendet wird, bekommt einen selbstvergebenen Namen, der mit 2 Bindestrichten beginnen muss:

scroll-timline-name: --my-scroller

Wenn man stattdessen die Scroll Funktion einsetzen würde, würde man mit dem zweiten Parameter die Achse bestimmen, das macht man hier mit der Eigenschaft scroll-timeline-axis

scroll-timeline-axis: inline

Man kann beide Eigenschaften in der Kurzschreibweise zusammenfassen:

scroll-timeline: --my-scroller inline;

Das Element welches animiert werden soll braucht selbstverständlich wieder die Eigenschaft animation-name mit dem Verweis auf die @keyframes Regel und eventuell weitere animation-Eigenschaften.

Der Verweis auf die Scrollleiste geschieht folgendermaßen:

animation-timeline: --my-scroller;

HTML

 <div class="scroller">
            <div>
            <div id="progress"></div>
            </div>
            </div>

CSS

            .scroller {
            max-width: 300px;
            margin: auto;
            overflow-x: scroll;
            scroll-timeline-name: --my-scroller;
            scroll-timeline-axis: x;

            }

            .scroller>div:nth-child(1) {
            width: 1000px;
            background-image: linear-gradient(90deg, red, yellow, green, blue, #86003c, red);
            height: 50px;



            }

            #progress {
            background-color: red;
            width: 10px;
            height: 1em;
            animation-name: aniWidth;
            animation-timing-function: linear;
            animation-timeline: --my-scroller;
            /*für Firefox*/
            animation-duration: 1ms;
            }

            @keyframes aniWidth {
            from {
            width: 10px;
            background-color: red;
            }

            to {
            width: 100%;
            background-color: yellow;
            }
            }