a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

implemented scroll into view when new card is added to carousel

celine e36693a6 9b7b0ec0

+19 -5
+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>