У меня есть три расширяемые вертикально сложенные карточки, расположенные в гибком макете под фиксированным прикрепленным заголовком.
Требования:
Было бы неплохо иметь функцию привязки прокрутки, чтобы при прокрутке прокрутка привязывалась к верху каждой карточки (или промежутку над ней).
Что я пробовал:
Я установил классы 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
