Привязка прокрутки CSS/Tailwind не работает в прокручиваемом гибком контейнере с прикрепленным заголовком ⇐ Html

[Anonymous]

У меня есть три расширяемые вертикально сложенные карточки, расположенные в гибком макете под фиксированным прикрепленным заголовком.
Требования:
Было бы неплохо иметь функцию привязки прокрутки, чтобы при прокрутке прокрутка привязывалась к верху каждой карточки (или промежутку над ней).
Что я пробовал:
Я установил классы overflow-y-auto, snap-y и snap-mandatory в контейнере родительской карты и snap-center/snap-start на дочерних карточках. Однако привязка прокрутки не работает.
Что я делаю не так? Я что-то упустил?
Ниже приведен мой код для описанного примера.









Card 1




Row 1


Row 2


Row 3


Row 4


Row 5


Row 6


Row 7


Row 8


Row 9


Row 10


Row 11


Row 12


Row 13


Row 14


Row 15





View more




class="card overflow-hidden transition-all duration-300 bg-green-300 snap-center
h-[calc((100vh-64px-4*1rem)/3)] [&[opened]]:h-[calc(100vh-64px-2*1rem)] overflow-hidden">

Card 2




Row 1


Row 2


Row 3


Row 4


Row 5


Row 6


Row 7


Row 8


Row 9


Row 10


Row 11


Row 12


Row 13


Row 14


Row 15





View more




class="card overflow-hidden transition-all duration-300 bg-blue-300 snap-center
h-[calc((100vh-64px-4*1rem)/3)] [&[opened]]:h-[calc(100vh-64px-2*1rem)] overflow-hidden">

Card 3




Row 1


Row 2


Row 3


Row 4


Row 5


Row 6


Row 7


Row 8


Row 9


Row 10


Row 11


Row 12


Row 13


Row 14


Row 15





View more






const cards = document.querySelectorAll('.card');

function toggleCard(index, btn) {
const card = cards[index];
const isOpen = card.hasAttribute('opened');

if (isOpen) {
card.removeAttribute('opened');
btn.textContent = 'View more';
} else {
card.setAttribute('opened', '');
btn.textContent = 'View less';
}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... ner-with-s