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

Разбираемся в CSS
Ответить
Anonymous
 Прокрутка двух DIVов разной высоты; один ждет другого

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»