Scrollen zwischen zwei Divs unterschiedlicher Höhen synchronisieren ⇐ CSS

[Anonymous]

Problem :
Ich möchte, dass zwei Divs synchronen zusammen scrollen. Wenn beispielsweise die erste DIV auf halbem Weg gescrollt ist, sollte der zweite auch in der Mitte des eigenen Inhalts sein, obwohl die beiden Divs unterschiedliche Höhen sind. Ich bin mir nicht sicher, wie ich ihre Scrollpositionen richtig verknüpfen soll.


for (i = 0; i < 10; i++) {
document.querySelector(".right").insertAdjacentHTML("afterbegin", `${10 - i}`)
}
for (i = 0; i < 20; i++) {
document.querySelector(".main").insertAdjacentHTML("afterbegin", `${20 - i}`)
}< /code>
body{
margin: 0px;
padding: 0px;
}
.box {
height: 200px;
width: 250px;
border: 2px solid red;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: larger;
}

.cont {
display: flex;
align-items: flex-start;
}< /code>



< /code>
< /div>
< /div>

< /code>