adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: prevent scroll capture on card rows with pointer-events

Browse Source 
- Wrap card containers in overflow-x-auto with pointer-events: none
- Inner flex div gets pointer-events: auto so cards remain interactive
- Main page scrolling works normally when cursor is over card rows
This commit is contained in:
adrianbonpin
2026-06-26 22:03:44 +08:00
parent 26fc600266
commit 9ee927ce77
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+9 -3
View File
@@ -55,7 +55,8 @@ function SkeletonSections() {
className='space-y-3' className='space-y-3'
> >
<div className='h-5 w-48 bg-text/5 rounded animate-pulse' /> <div className='h-5 w-48 bg-text/5 rounded animate-pulse' />
<div className='flex gap-3 flex-wrap gap-3 pb-2'> <div className='overflow-x-auto overflow-y-hidden' style={{ pointerEvents: 'none' }}>
<div className='flex gap-3 pb-2' style={{ pointerEvents: 'auto' }}>
{[1, 2, 3, 4].map((j) => ( {[1, 2, 3, 4].map((j) => (
<div <div
key={j} key={j}
@@ -69,6 +70,7 @@ function SkeletonSections() {
</div> </div>
))} ))}
</div> </div>
</div>
</div> </div>
))} ))}
</> </>
@@ -121,7 +123,8 @@ function GameSection({
</div> </div>
</div> </div>
<div className='flex gap-3 flex-wrap gap-3 pb-2 -mx-1 px-1'> <div className='overflow-x-auto overflow-y-hidden -mx-1 px-1' style={{ pointerEvents: 'none' }}>
<div className='flex gap-3 pb-2 px-1' style={{ pointerEvents: 'auto' }}>
{games.map((game, idx) => ( {games.map((game, idx) => (
<motion.div <motion.div
key={game.id} key={game.id}
@@ -199,6 +202,7 @@ function GameSection({
</motion.div> </motion.div>
))} ))}
</div> </div>
</div>
</motion.section> </motion.section>
) )
} }
@@ -228,7 +232,8 @@ function SaleSection({
</div> </div>
</div> </div>
<div className='flex gap-3 flex-wrap gap-3 pb-2 -mx-1 px-1'> <div className='overflow-x-auto overflow-y-hidden -mx-1 px-1' style={{ pointerEvents: 'none' }}>
<div className='flex gap-3 pb-2 px-1' style={{ pointerEvents: 'auto' }}>
{games.map((game, idx) => { {games.map((game, idx) => {
const discountPct = game.price_initial && game.price_current const discountPct = game.price_initial && game.price_current
? Math.round((1 - game.price_current / game.price_initial) * 100) ? Math.round((1 - game.price_current / game.price_initial) * 100)
@@ -324,6 +329,7 @@ function SaleSection({
) )
})} })}
</div> </div>
</div>
{/* Disclaimer */} {/* Disclaimer */}
<p className='text-[10px] text-text/20 mt-1 text-right'> <p className='text-[10px] text-text/20 mt-1 text-right'>