sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve scrolling behavior on mobile devices for a smoother user experience

Browse Source 
Adjust the scroll amount for mobile devices and enhance touch event handling in the `CategoryRow` component to fix scrolling issues.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/P3O2FU7
This commit is contained in:
sebastjanartic 2025-08-29 10:30:35 +00:00
parent 6407a4770b
commit 9a35a7bd21
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/components/netflix-grid.tsx
View File

@ -140,8 +140,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
// Responsive scroll amount - extra small cards for Netflix style // Responsive scroll amount - extra small cards for Netflix style
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
// Scroll by container width for smoother experience // More responsive scroll amounts for better mobile experience
const scrollAmount = isMobile ? containerWidth * 0.8 : containerWidth * 0.75; const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.75;
const currentScroll = scrollRef.current.scrollLeft; const currentScroll = scrollRef.current.scrollLeft;
const targetScroll = direction === 'left' const targetScroll = direction === 'left'
? Math.max(0, currentScroll - scrollAmount) ? Math.max(0, currentScroll - scrollAmount)
@ -203,8 +203,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
</div> </div>
{/* Mobile touch areas for left/right navigation */} {/* Mobile touch areas for left/right navigation */}
<div className="md:hidden absolute left-0 top-0 w-1/3 h-full z-20" onClick={() => scroll('left')} /> <div
<div className="md:hidden absolute right-0 top-0 w-1/3 h-full z-20" onClick={() => scroll('right')} /> className="md:hidden absolute left-0 top-0 w-1/3 h-full z-40 bg-transparent"
onClick={() => scroll('left')}
style={{ touchAction: 'manipulation' }}
/>
<div
className="md:hidden absolute right-0 top-0 w-1/3 h-full z-40 bg-transparent"
onClick={() => scroll('right')}
style={{ touchAction: 'manipulation' }}
/>
{/* Scrollable video row - edge to edge */} {/* Scrollable video row - edge to edge */}
<div <div