Применение типа прокрутки к анимированной прокрутке на основе временной шкалы ⇐ CSS

[Anonymous]

TL;DR: в этом jsfiddle https://jsfiddle.net/kLp728xw/ я хочу применить привязку прокрутки не только к вертикальной прокрутке, как это уже происходит, но и к горизонтальной прокрутке. где показаны цифры от 1 до 5.

Я хочу применить эффект привязки прокрутки к содержимому, анимированному с помощью @keyframes по горизонтали, например слайд-шоу, вместе просмотр-временная шкала. Код части горизонтальной прокрутки из jsfiddle показан ниже.
Я просто попытался добавить прокрутку-привязку-тип: обязательный, переполнение: прокрутку и прокрутку-привязку-выравнивание: start< /code> как мы обычно делаем, но не смогли заставить его работать.
Во-первых, возможно ли это? Если нет, можете ли вы придумать какой-нибудь обходной путь, например, с использованием JavaScript? (например, я мог бы использовать IntersectionObserver.)
В качестве базовой линии мне нужна «гибридная прокрутка» - как показано на скрипке, смешанная вертикальная и горизонтальная прокрутка - с привязкой прокрутки. Если текущий код jsfiddle уже заходит в тупик, мне бы хотелось знать, как его реализовать с нуля.




1
2
3
4
5




/* CSS */
.section.pin {
height: 500vh;

view-timeline-name: --section-pin;
view-timeline-axis: block;
}

.sticky {
height: 100vh;
width: 100vw;
position: sticky;
top: 0;
}

.slides {
height: 100vh;
width: 400vw;

display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;

animation: horizontalScroll linear both;
animation-timeline: --section-pin;
animation-range: contain 0%;
}

@keyframes horizontalScroll {
from {
transform: translateX(0);
}

to {
transform: translateX(-100%);
}
}

.item {
width: 100vw;
min-width: 100vw;
height: 100vh;
}



Подробнее здесь: https://stackoverflow.com/questions/791 ... ted-scroll