diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 9c66d4b..9a38259 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -138,46 +138,29 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const [isRightButtonHovered, setIsRightButtonHovered] = useState(false); const scroll = (direction: 'left' | 'right') => { - if (scrollRef.current) { - const isMobile = window.innerWidth < 768; - const containerWidth = scrollRef.current.clientWidth; - const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.7; - - if (direction === 'left') { - scrollRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); - } else { - scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' }); - } + if (!scrollRef.current) return; + + const containerWidth = scrollRef.current.clientWidth; + const scrollAmount = containerWidth * 0.8; // 80% of container width + + console.log(`Scrolling ${direction}, container width: ${containerWidth}, scroll amount: ${scrollAmount}`); + + if (direction === 'left') { + scrollRef.current.scrollBy({ + left: -scrollAmount, + behavior: 'smooth' + }); + } else { + scrollRef.current.scrollBy({ + left: scrollAmount, + behavior: 'smooth' + }); } }; const startAutoScroll = (direction: 'left' | 'right') => { - if (scrollIntervalRef.current) { - clearInterval(scrollIntervalRef.current); - } - - // Force fast scrolling when hovering - const isHovering = true; - - scrollIntervalRef.current = setInterval(() => { - if (scrollRef.current) { - const currentScroll = scrollRef.current.scrollLeft; - const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth; - const scrollAmount = direction === 'left' ? -10 : 10; // Much faster scroll - - let newScroll = currentScroll + scrollAmount; - - if (direction === 'left' && newScroll <= 0) { - // Jump to end for infinite loop - newScroll = maxScroll; - } else if (direction === 'right' && newScroll >= maxScroll) { - // Jump to beginning for infinite loop - newScroll = 0; - } - - scrollRef.current.scrollLeft = newScroll; - } - }, 8); // Fast interval + // Just do single scroll on hover start + scroll(direction); }; const stopAutoScroll = () => {