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

[Гость]

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

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

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

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

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