diff --git a/src/components/EpisodeSelector.tsx b/src/components/EpisodeSelector.tsx index 26b0fd4..93a124c 100644 --- a/src/components/EpisodeSelector.tsx +++ b/src/components/EpisodeSelector.tsx @@ -173,7 +173,7 @@ const EpisodeSelector: React.FC = ({ } }, [precomputedVideoInfo]); - // 读取本地“优选和测速”开关,默认开启 + // 读取本地"优选和测速"开关,默认开启 const [optimizationEnabled] = useState(() => { if (typeof window !== 'undefined') { const saved = localStorage.getItem('enableOptimization'); @@ -241,6 +241,50 @@ const EpisodeSelector: React.FC = ({ const categoryContainerRef = useRef(null); const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]); + // 添加鼠标悬停状态管理 + const [isCategoryHovered, setIsCategoryHovered] = useState(false); + + // 阻止页面竖向滚动 + const preventPageScroll = useCallback((e: WheelEvent) => { + if (isCategoryHovered) { + e.preventDefault(); + } + }, [isCategoryHovered]); + + // 处理滚轮事件,实现横向滚动 + const handleWheel = useCallback((e: WheelEvent) => { + if (isCategoryHovered && categoryContainerRef.current) { + e.preventDefault(); // 阻止默认的竖向滚动 + + const container = categoryContainerRef.current; + const scrollAmount = e.deltaY * 2; // 调整滚动速度 + + // 根据滚轮方向进行横向滚动 + container.scrollBy({ + left: scrollAmount, + behavior: 'smooth' + }); + } + }, [isCategoryHovered]); + + // 添加全局wheel事件监听器 + useEffect(() => { + if (isCategoryHovered) { + // 鼠标悬停时阻止页面滚动 + document.addEventListener('wheel', preventPageScroll, { passive: false }); + document.addEventListener('wheel', handleWheel, { passive: false }); + } else { + // 鼠标离开时恢复页面滚动 + document.removeEventListener('wheel', preventPageScroll); + document.removeEventListener('wheel', handleWheel); + } + + return () => { + document.removeEventListener('wheel', preventPageScroll); + document.removeEventListener('wheel', handleWheel); + }; + }, [isCategoryHovered, preventPageScroll, handleWheel]); + // 当分页切换时,将激活的分页标签滚动到视口中间 useEffect(() => { const btn = buttonRefs.current[displayPage]; @@ -339,7 +383,12 @@ const EpisodeSelector: React.FC = ({ <> {/* 分类标签 */}
-
+
setIsCategoryHovered(true)} + onMouseLeave={() => setIsCategoryHovered(false)} + >
{categories.map((label, idx) => { const isActive = idx === displayPage;