Mac端如何阻止浏览器后退滑动？Next.js场景问题求助

Mac系统下的浏览器（尤其是Safari、Chrome）对触控板横向滚动事件的处理机制和Windows不同，默认的e.preventDefault()失效通常是因为滚轮事件被默认设为passive: true，导致阻止默认行为的操作被忽略。以下是具体解决方法：

核心解决方案：显式设置事件监听的passive属性 #

在添加滚轮事件监听器时，必须指定passive: false，同时只在横向滚动时阻止默认行为，避免影响纵向滚动功能：

import { useEffect } from 'react';

export default function YourComponent() {
  useEffect(() => {
    const handleWheel = (e) => {
      // 判断是否为横向滚动（优先处理deltaX主导的滚动）
      if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
        // 强制阻止浏览器默认的前进/后退行为
        e.preventDefault();
        // 这里执行你的横向内容移动逻辑
        // 示例：调整内容的滚动位置
        // document.querySelector('.scroll-container').scrollLeft += e.deltaX;
      }
    };

    // 关键：设置passive: false，让preventDefault生效
    window.addEventListener('wheel', handleWheel, { passive: false });

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('wheel', handleWheel);
    };
  }, []);

  return <div className="scroll-container">你的可移动内容</div>;
}

针对Safari的额外兼容处理 #

部分旧版Safari对wheel事件的支持有限，可以同时监听mousewheel事件做兼容：

useEffect(() => {
  const handleScroll = (e) => {
    // 统一判断横向滚动逻辑
    if (Math.abs(e.deltaX) > Math.abs(e.deltaY) || Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY)) {
      e.preventDefault();
      // 执行横向滚动逻辑
    }
  };

  window.addEventListener('wheel', handleScroll, { passive: false });
  window.addEventListener('mousewheel', handleScroll, { passive: false });

  return () => {
    window.removeEventListener('wheel', handleScroll);
    window.removeEventListener('mousewheel', handleScroll);
  };
}, []);

注意事项 #

• 只在确实需要横向滚动的场景下阻止默认行为，不要全局禁用滚轮的默认功能，避免影响用户体验。
• 确保事件监听在客户端渲染时添加（useEffect在Next.js客户端执行，符合要求），不要在SSR阶段添加。

内容的提问来源于stack exchange，提问作者Mustafa Aswadi