CSS Scroll Snap с Snappable контейнером ⇐ CSS

[Anonymous]

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

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

.scroll-snap-wrapper {
scroll-snap-type: y mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}

.scroll-snap-wrapper::-webkit-scrollbar {
display: none;
}

.card-1 {
scroll-snap-align: start;
}

.card-2 {
scroll-snap-align: start;
}

.card-3 {
scroll-snap-align: start;
}

.card-4 {
scroll-snap-align: start;
}

.card-5 {
scroll-snap-align: start;
}

Он отлично работает, если не считать этого. Итак, я получил раздел без возможности привязки, затем раздел с моей оболочкой .scroll-snap-wrapper с значением 100vh, а затем еще один раздел, который нельзя привязать. Внутри моего контейнера 5 карточек со 100vh, я могу их пролистывать, и они щелкают. Моя проблема заключается в следующем: когда я прокручиваю свою страницу вниз и говорю, что моя мышь находится в середине экрана, и оболочка появляется в поле зрения, как только моя оболочка достигает высоты моей мыши, я прокручиваю внутри оболочки, а карты внутри оболочки snap, я все еще вижу часть раздела раньше, так как оболочка не привязывается.
Я пытался применить тот же эффект привязки к оболочке, но кажется, что она не может быть родительской и дочерней в то же время. Я также пытался создать код JavaScript, который гарантировал бы, что оболочка начнет прокручиваться только тогда, когда она полностью в поле зрения, но это не сработало.
Моей последней попыткой была попытка использовать анимацию GSAP ScrollTrigger для защелкните обертку. Я не уверен, что что-то запрещает им работать одновременно, но когда я добавляю этот код, карты внутри оболочки больше не видны.

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

document.addEventListener('DOMContentLoaded', function () {
gsap.registerPlugin(ScrollTrigger);

// Set up ScrollTrigger for the .scroll-snap-wrapper
ScrollTrigger.create({
trigger: '.scroll-snap-wrapper', // Target the wrapper
start: 'top top', // When the wrapper reaches the top of the viewport
end: '+=100%', // Adjust the end of the trigger
pin: true, // Pin the wrapper while scrolling
scrub: true, // Smooth scrubbing
markers: false, // Disable markers for debugging
});
});

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

Подробнее здесь: https://stackoverflow.com/questions/793 ... -container