Временная шкала с пропусканной линией и вертикально центрированным индикатором с использованием только CSS ⇐ Html

[Anonymous]

В настоящее время я работаю над решением только для CSS для вертикальной временной шкалы с индикатором. Я уже решил его с помощью JavaScript, но хотел бы посмотреть, возможно ли это также с CSS. Просто нормальное поведение липкого элемента с верхней частью: 50%; В контейнере. Временная шкала под индикатором должна быть серой, временная шкала над индикатором должна быть окрашена. Таким образом, вы видите, какую часть временной шкалы вы уже прошли (прокручивали). < /P>
Проблема с моим добавленным примером заключается в том, что цветная стержень с временной шкалой переполняет контейнер с временной шкалой. Я не могу дать переполнение контейнера: скрыто;, из -за липкой, чтобы предотвратить переполнение контейнера с временной шкалой. Я также не могу добавить элементы выше и под временной шкалой. < /P>
Может быть, есть некоторые разработчики, которые могут мне помочь. Большое спасибо! < /p>

Код: Выделить всё

html, body {
margin: 0;
padding: 0;
}

.timeline-container {
position: relative;
height: 100vh;
margin-top: 75vh;
margin-bottom: 75vh;
background-color: burlywood;
/* Unfortunately overflow hidden won't work with the sticky timeline-indicator element */
/* overflow: hidden; */
}

.timeline, .timeline-passed {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: lightgray;
}

.timeline-passed {
position: fixed;
background: teal;
transform: translate(-50%, -50%);
}

.timeline-indicator {
position: sticky;
top: 50%;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 16px;
background: slategray;
border: 2px solid darkslategray;
border-radius: 999999px;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/796 ... g-only-css