Handle mouse scrolling better

This commit is contained in:
Cooper Ransom 2024-04-05 20:36:13 -04:00
parent 6d93b3105d
commit 366251e143
1 changed files with 4 additions and 7 deletions

View File

@ -211,7 +211,6 @@ export function Discover() {
}, [movieWidth]); }, [movieWidth]);
let isScrolling = false; let isScrolling = false;
function handleWheel(e: React.WheelEvent, categorySlug: string) { function handleWheel(e: React.WheelEvent, categorySlug: string) {
if (isScrolling) { if (isScrolling) {
return; return;
@ -262,12 +261,7 @@ export function Discover() {
? `${category} Shows` ? `${category} Shows`
: `${category} Movies`; : `${category} Movies`;
return ( return (
<div <div className="relative overflow-hidden mt-4 rounded-xl">
className="relative overflow-hidden mt-4 rounded-xl"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onWheel={(e) => handleWheel(e, categorySlug)}
>
<h2 className="text-2xl font-bold text-white sm:text-3xl md:text-2xl mx-auto pl-2"> <h2 className="text-2xl font-bold text-white sm:text-3xl md:text-2xl mx-auto pl-2">
{displayCategory} {displayCategory}
</h2> </h2>
@ -281,6 +275,9 @@ export function Discover() {
ref={(el) => { ref={(el) => {
carouselRefs.current[categorySlug] = el; carouselRefs.current[categorySlug] = el;
}} }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onWheel={(e) => handleWheel(e, categorySlug)}
> >
{medias.slice(0, 20).map((media) => ( {medias.slice(0, 20).map((media) => (
<a <a