切换路由后浏览器缩放出现外部滚动条的问题求助

问题场景 #

• 基于布尔变量isEnabled切换显示Menu组件后，缩放浏览器会出现外部滚动条
• 从无Menu视图切换到显示Menu视图后触发问题，手动刷新页面再缩放则无此问题
• 滚动条问题与自定义D3图表高度直接相关：将图表高度从98%改为50%/75%后，浏览器缩放到对应高度时就会出现外部滚动条
• 需求：外部无滚动条，由Splitter内部滚动条处理内容滚动

页面布局代码 #

<div className="mainDiv">
  {
    !isEnabled &&
    <Menu className="menuTab" style={{height: "60px"}} ... >
        {
          <MenuItem ... />
        }
    </Menu>
  }
  <Splitter className="splitter">
    <div>
    // 更多自定义div等内容
    </div>
    <div className="graph">
      {
        isEnabled && <customD3Graph ... />
      }
      {
        !isEnabled && <customD3Graph2 ... />
      }
  </Splitter>
</div>

核心布局CSS #

.mainDiv {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  // 该计算适配其他JS文件中显示的顶部标题/横幅
  height: calc(100% - 85px - 50px);
  width: 100%;
}

.splitter {
  height: 100%;
  width: 100%;
  margin: auto;
  order: 1;
  flex-grow: 1;
}

.mainDiv:has(.menuTab) > .splitter {
  // 计算高度以抵消显示的Menu组件
  height: calc(100% - 60px);
  width: 100%;
  margin: auto;
  flex-grow: 1;
  flex-basis: auto;
}

自定义D3图表相关CSS #

.graph {
  // 设置为小于100%是因为100%会直接触发滚动条
  height: 98%;
  width: 100%;
}

自定义D3组件结构 #

<div style={{height: "100%", width: "100%", margin: "0px"}}>
  // 自定义组件内容
</div>

解决方案 #

1. 优化Flex布局空间分配 #

问题根源是切换Menu后，calc(100% - 60px)的高度计算可能因Flex布局的剩余空间分配逻辑出现偏差，加上D3图表的百分比高度累积导致溢出。移除固定高度，完全依赖Flex的弹性分配：

.splitter {
  /* 移除height:100% */
  width: 100%;
  margin: auto;
  order: 1;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto; /* 内部内容超出时显示滚动条 */
}

.mainDiv:has(.menuTab) > .splitter {
  /* 移除height: calc(100% - 60px) */
  width: 100%;
  margin: auto;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  overflow: auto;
}

2. 修正D3图表容器的高度逻辑 #

给.graph容器添加溢出控制，用精准的微调替代固定98%的高度：

.graph {
  height: calc(100% - 2px); /* 微调避免溢出 */
  width: 100%;
  overflow: hidden; /* 隐藏超出容器的内容 */
}

3. 强制触发布局重绘 #

切换isEnabled状态后，手动触发容器重绘，解决浏览器未及时更新布局的问题：

// 在切换isEnabled的逻辑后执行
const mainDiv = document.querySelector('.mainDiv');
mainDiv.style.display = 'none';
requestAnimationFrame(() => {
  mainDiv.style.display = 'flex';
});

内容的提问来源于stack exchange，提问作者Doug Steiert