Как сохранить центр персонажа на прокручиваемом экране? ⇐ CSS

[Гость]

Я имею в виду, что если я прокручиваю вниз, мой персонаж будет двигаться по пути, но вид ВСЕГДА будет показывать его в центре моего обзора. Мне это нужно, чтобы видеть предстоящие препятствия на моем пути.
Вот мой код:

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

  pathIcon.style.offsetPath = `path('${Path_440.getAttribute("d")}')`;
const pathLength = Path_440.getTotalLength();

function clamp(min, val, max) {
return Math.min(Math.max(min, val), max);
}

function updatePath() {
const docElt = document.documentElement;
const pathBox = theFill.getBoundingClientRect();

// calculates scroll progress based on viewport progress
const scrollProgress = clamp(
0,
-pathBox.y / (pathBox.height - docElt.clientHeight),
1
);

pathIcon.style.offsetDistance = `${scrollProgress * 100}%`;

// These lines fill in the dashes as you scroll down.
const drawLength = pathLength * scrollProgress;
const rest = pathLength - drawLength;
theFill.style.strokeDasharray = `${drawLength}px ${rest}px`;
}

updatePath();
window.addEventListener("scroll", () => updatePath());

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

 body {
height: 500vh;
background: #f1f1f1;
}
.container {
display: flex;
justify-content: center;
}
#pathIcon {
position: absolute;
inset: 0;
width: 100px;
height: 100px;
offset-rotate: 0rad;
}
.middlePath {
position: absolute;
}
.crossLine {
position: absolute;
}

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

[img]/public/pngegg.png[/img]
          width="580"
height="1500"
alt=""
/>

I want to see the SVG pathIcon passes center of screen but still move along the path. In this code,I’m scrolling down, the pathicon move too fast. Please help me


Источник: https://stackoverflow.com/questions/781 ... ing-screen