Chrome中wheel事件触发scrollIntoView smooth行为失效问题排查

我之前也碰到过Chrome和Firefox在平滑滚动上的表现差异，结合你描述的布局细节，问题大概率出在滚动容器的上下文识别上——Chrome对滚动目标所属容器的判断逻辑比Firefox更严格，而你的布局刚好踩了这个坑。

问题根源分析 #

你的页面结构里：

• 主内容区域用overflow-y实现局部滚动，这意味着它是一个独立的滚动容器
• 左侧菜单用relative+float布局，可能导致根容器（window/html）和主内容容器的滚动上下文产生冲突
• 全屏的welcome图让根容器初始就有滚动条，进一步让Chrome混淆了“应该在哪个容器里执行平滑滚动”

Firefox会自动识别目标元素所在的滚动容器并执行平滑滚动，但Chrome在这种嵌套滚动场景下，经常会错误地触发根容器的滚动，或者直接忽略smooth行为。

具体解决方案 #

1. 直接指定滚动容器执行平滑滚动

放弃使用元素的scrollIntoView，转而找到主内容的滚动容器，调用它的scrollTo方法来实现平滑滚动，这样能明确告诉Chrome滚动的上下文：

// 替换成你的主内容容器选择器
const scrollContainer = document.querySelector('.main-content');
// 替换成你要滚动到的目标元素
const targetElement = document.getElementById('target-section');

// 计算目标元素在滚动容器内的偏移量
const relativeOffset = targetElement.offsetTop - scrollContainer.offsetTop;

// 执行平滑滚动
scrollContainer.scrollTo({
  top: relativeOffset,
  behavior: 'smooth'
});

2. 修复滚动容器的可聚焦性

给主内容滚动容器添加tabindex="0"，让Chrome能正确识别它作为可交互的滚动容器，避免上下文混淆：

<div class="main-content" tabindex="0" style="overflow-y: scroll; height: 100vh;">
  <!-- 主内容 -->
</div>

3. 抑制根容器的滚动（可选）

如果你的页面所有滚动都应该在主内容区域内完成，可以通过CSS强制根容器不滚动，彻底消除上下文冲突：

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

验证步骤 #

• 先临时移除welcome图，测试Chrome的平滑滚动是否恢复，确认是不是根容器滚动干扰的问题
• 检查主内容容器是否设置了明确的高度（比如height: 100vh或基于父元素的高度计算），没有高度的话overflow-y不会生效

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