React模态框滚动异常：滚动条可见但无法通过触控板/鼠标滚轮滚动

我完全懂这种卡了一周的挫败感！滚动条明明就在那儿，拖拽能正常滚动，但鼠标滚轮、触控板双指滑动就是没反应，这种问题真的磨人。咱们来一步步拆解你的代码，找出问题根源，然后彻底解决它。

问题根源分析 #

你目前用position: fixed给body加滚动锁定的方式，大概率是导致滚轮失效的核心原因。当body被设置为position: fixed时，整个页面的滚动上下文被彻底改变了——浏览器会默认监听body的滚动事件，但现在body脱离了文档流，模态框的滚动容器无法正确接管滚轮事件，自然就没反应了。

虽然你给滚动容器加了overflow-y: scroll和一堆触控相关的CSS，但滚动上下文被破坏的话，这些属性也发挥不了作用。

分步解决方案 #

1. 替换body滚动锁定的方式（核心修复）

把position: fixed换成overflow: hidden来锁定背景滚动，这样不会改变文档流的滚动上下文，模态框的滚动事件就能正常传递了。同时我们还可以加上一点额外处理，避免滚动条消失导致的页面跳动。

首先修改你的useEffect逻辑：

useEffect(() => {
  // 计算浏览器滚动条宽度，用来抵消页面跳动
  const getScrollbarWidth = () => {
    return window.innerWidth - document.documentElement.clientWidth;
  };

  if (isModalOpen) {
    const scrollbarWidth = getScrollbarWidth();
    // 把滚动条宽度存在CSS变量里
    document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
    document.body.classList.add("modal-open");
  } else {
    document.body.classList.remove("modal-open");
    document.documentElement.style.removeProperty('--scrollbar-width');
  }

  return () => {
    document.body.classList.remove("modal-open");
    document.documentElement.style.removeProperty('--scrollbar-width');
  };
}, [isModalOpen]);

然后在你的全局CSS里给.modal-open类添加样式：

.modal-open {
  overflow: hidden;
  /* 用CSS变量抵消滚动条消失的页面偏移 */
  padding-right: var(--scrollbar-width, 0px);
}

2. 确保模态框容器的滚动上下文独立

给模态框的外层grid容器加上max-h-[90vh]，确保它的高度不会超出视口，这样内部滚动容器的h-[90vh]能正确生效：

<div 
  className="relative grid grid-cols-1 md:grid-cols-2 gap-8 bg-white rounded-lg shadow-lg p-6 w-[90vw] max-h-[90vh]" 
  onClick={(e) => e.stopPropagation()} 
>

3. 给滚动容器补全关键样式

虽然你已经加了一些触控相关的样式，但可以再补充pointer-events: auto确保它能优先接收鼠标/触控事件，同时把overflow-y: scroll换成overflow-y: auto（内容不足时不会显示空滚动条，体验更友好）：

<div 
  style={{ 
    WebkitOverflowScrolling: "touch", 
    touchAction: "auto", 
    overscrollBehavior: "contain",
    pointerEvents: "auto"
  }} 
  className="modal-scrollbar flex flex-col justify-start pr-4 overflow-y-auto h-[90vh]" 
>

额外排查点 #

如果做完上面的修改还是没效果，你可以检查这两个地方：

• 项目里有没有全局的wheel事件监听（比如window.addEventListener('wheel', ...)），如果有代码调用了event.preventDefault()，会直接阻止滚轮事件传递到模态框。
• 检查模态框的父元素有没有被设置pointer-events: none，这个属性会让元素无法接收任何鼠标/触控事件。

按照这个思路改完，应该就能解决滚轮/触控板无法滚动的问题了！

内容来源于stack exchange