a tool for shared writing and social publishing
implemented scroll into view when new card is added to carousel
+19
-5
+19
-5
app/test/page.tsx
+19
-5
app/test/page.tsx
···
15
15
16
16
<div className="pageContentWrapper w-full overflow-x-scroll snap-mandatory snap-x grow items-stretch flex ">
17
17
<div className="pageContent flex">
18
-
<div style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} />
18
+
<div
19
+
className="bg-test"
20
+
style={{ width: `calc((100vw - ${cardWidth}px)/2)` }}
21
+
/>
19
22
20
23
{cards.map((card, index) => (
21
-
<div className="flex items-stretch" ref={cardRef}>
24
+
<div
25
+
className="flex items-stretch"
26
+
ref={index === 0 ? cardRef : null}
27
+
>
22
28
<Card first={index === 0} key={index} id={index.toString()}>
23
29
Card {card}
24
30
<ButtonPrimary
···
27
33
setCards([...cards, card + 1]);
28
34
29
35
//scroll the new card into view
30
-
document
31
-
.getElementById((index + 1).toString())
32
-
?.scrollIntoView();
36
+
37
+
setTimeout(() => {
38
+
let newCardID = document.getElementById(
39
+
(index + 1).toString(),
40
+
);
41
+
newCardID?.scrollIntoView({
42
+
behavior: "smooth",
43
+
inline: "center",
44
+
});
45
+
}, 100);
33
46
}}
34
47
>
35
48
add card
···
52
65
))}
53
66
54
67
<div
68
+
className="bg-test"
55
69
style={{ width: `calc((100vw / 2) - ${cardWidth}px + 12px )` }}
56
70
/>
57
71
</div>