CSS-прокрутка вверху только тогда, когда дочерние элементы больше родительского контейнера ⇐ CSS

[Anonymous]

Я использую scroll-snap-type: y для вертикальной прокрутки с помощью точек привязки в контейнере. Моя цель состоит в том, чтобы верхняя часть каждого дочернего элемента привязывалась к верхней части родительского контейнера.

Однако я столкнулся с проблемой, когда дочерний элемент также привязывается к нижней части родительского контейнера. Я хочу гарантировать, что только верхняя часть каждого дочернего элемента привязывается к верхней части родительского, даже если дочерние элементы больше родительского.

В моем конкретном случае у меня есть родительский контейнер высотой 100vh. Внутри этого контейнера есть два дочерних элемента. У первого ребенка рост 120 дюймов, а у второго — 100 дюймов. При прокрутке я хочу избегать точек привязки, в которых верхняя часть второго дочернего элемента совпадает с нижней частью родительского элемента.

Есть ли способ настроить привязку прокрутки CSS так, чтобы привязывать только верхнюю часть этих более крупных дочерних элементов к верхней части родительского контейнера?

.wrapper { высота: 100вх; переполнение: авто; тип прокрутки-привязки: y обязателен; } .панель { ширина: 100vw; прокрутка-привязка-выравнивание: начало; высота: 120вх; фон: красный; дисплей: гибкий; оправдание-содержание: центр; белый цвет; выровнять-элементы: по центру; } .panel2 { ширина: 100vw; высота: 100вх; прокрутка-привязка-выравнивание: конец; фон: розовый; дисплей: гибкий; оправдание-содержание: центр; черный цвет; выровнять-элементы: по центру; ПАНЕЛЬ ОДИН ПАНЕЛЬ ВТОРАЯ

ИЗМЕНИТЬ

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

Прокрутка вниз:

Когда пользователь прокручивает вниз, верхняя часть каждого дочернего элемента должна привязываться к верхней части родительского контейнера. Например, когда пользователь прокручивает страницу вниз от первой панели до второй, я хочу, чтобы верхняя часть второй панели совпадала с верхней частью оболочки без каких-либо дополнительных точек привязки между ними.

Прокрутка вверх:

Когда пользователь прокручивает страницу от второй до первой, верхняя часть первой панели должна совпадать с верхней частью оболочки.

Ключевой момент – избегать точек привязки, в которых нижняя часть дочернего элемента (например, нижняя часть Panel One) совмещается с нижней частью оболочки.

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