Перемещайте полосу прокрутки, прокручивая страницу ⇐ CSS

[Anonymous]

Взгляните на следующий код:

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

 function getScrollPercent() {
const h = document.documentElement;
const st = 'scrollTop';
const sh = 'scrollHeight';
const clientHeight = h.clientHeight;
const scrollTop = h[st];
const scrollHeight = h[sh];

return scrollTop / (scrollHeight - clientHeight) * 100;
}

function update_scroll() {
const scrollPercent = getScrollPercent();

document.getElementById("scroll-line").style.height = `${scrollPercent}%`;
document.getElementById("progress").textContent = Math.round(scrollPercent) + '%';
}

window.addEventListener('scroll', update_scroll);
update_scroll();

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

 .content-site {
height: 500vh;
}

#main_box {
position: fixed;
right: 50px;
bottom: 80px;
}

#body_box {
width: 100px;
height: 100px;
background: #b0ffcb;
box-shadow: 0 0 4px #050030;
border-radius: 50% !important;
position: relative;
overflow: hidden;
}

#progress {
position: absolute;
top: 40%;
left: auto;
z-index: 3;
color: #f00;
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
}

#scroll-line {
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
z-index: 2;
background-color: #050030;
}

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

Как видите, я реализовал индикатор выполнения, который меняет состояние в зависимости от состояния. в позиции прокрутки страницы.
Теперь вместо изменения цвета фона элемента при прокрутке я хочу создать кольцо выполнения вокруг элемента, которое меняет свое состояние по мере страницы. прокручивается.
Вот пример того, что я ищу:
https://codepen.io/christianmair/pen/dLVbze< /p>
Проблема приведенного выше примера заключается в том, что он использует SVG, что делает код очень сложным.
Я хочу сделайте это с помощью кода, который я написал до сих пор, но я пробовал много способов и не смог достичь желаемого результата.

Подробнее здесь: https://stackoverflow.com/questions/783 ... n-the-page