Маркеры прокрутки (индикаторы/точки) с помощью CSS Scrull Snap ⇐ CSS

[Anonymous]

Я строю прокручивающую карусель, используя Scroll Snap CSS. />
.carousel {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
width: 100vw;
white-space: nowrap;
overflow-x: scroll;
}

.carousel > * {
display: inline-block;
scroll-snap-align: start;
width: 100vw;
height: 100vh;
}

#x {
background-color: pink;
}
#y {
background-color: lightcyan;
}
#z {
background-color: lightgray;
}< /code>

x
y
z
< /code>
< /div>
< /div>
< /p>
Это работает довольно хорошо; Если вы прокручиваете карусель с помощью трекпада или пальцем, она прижимает к каждому элементу. например В начальной загрузке это маленькие точки или линии, указывающие, что в карусели есть несколько вещей, один маркер прокрутки на предмет в карусели, с выделением текущего предмета. Нажатие на индикатор обычно прокручивает вас к указанному элементу. .png " /> < /p>
мне нужен JavaScript для этого? (Я полагаю, так.) Как я должен обнаружить, какой предмет в настоящее время видна?


Подробнее здесь: https://stackoverflow.com/questions/533 ... croll-snap