Прокрутка двух DIVов разной высоты; один ждет другого ⇐ Html

[Anonymous]

Итак, в HTML-документе у меня есть два расположенных рядом DIV, каждый из которых имеет разную высоту. Когда пользователь начинает прокручивать вниз, оба DIV должны начать прокрутку одновременно, как и следовало ожидать. Когда будет достигнут конец более короткого DIV, он должен прилипнуть к нижней части области просмотра, пока не будет достигнут конец более высокого DIV. После этого страница должна продолжать прокручиваться «обычно». Вот отправная точка:

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

.parent {
display: flex
}

.child {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.left {
background: lightblue;
height: 200vh;
}

.right {
background: lightcoral;
height: 120vh;
}

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

Top
Bottom


Top
Bottom

После некоторых возни я могу добиться только полной противоположности того, чего пытаюсь достичь:

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

.parent {
display: flex
}

.child {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.left {
background: lightblue;
height: 200vh;
}

.right {
background: lightcoral;
height: 120vh;
position: sticky;
top: 0;
}

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

Top
Bottom


Top
Bottom

Будем благодарны за любую помощь.

Подробнее здесь: https://stackoverflow.com/questions/777 ... -the-other