scrollIntoView()操作水平滚动div时页面下移：需始终保持窗口顶部

方法一：修正scrollIntoView后强制回滚页面顶部 #

问题出在scrollIntoView会触发浏览器的垂直视口调整，导致页面滚动。你可以在执行scrollIntoView后，用requestAnimationFrame确保页面强制回滚到顶部，避免被浏览器的滚动行为覆盖：

navigateToTab(idx){
  const doc = document.getElementById('inner_div_' + idx);
  doc.scrollIntoView({ behavior: "auto", block: "nearest", inline: "start" });
  // 确保在scrollIntoView完成后执行回滚
  requestAnimationFrame(() => {
    window.scrollTo({ top: 0, behavior: 'auto' });
  });
}

方法二：直接操作外层div的水平滚动（更精准） #

放弃使用scrollIntoView（它会影响全局视口），转而直接控制外层div的scrollLeft，这样只会触发水平滚动，不会干扰页面的垂直位置：

navigateToTab(idx){
  // 假设外层div的id是'outer_div'，根据实际情况修改
  const outerDiv = document.getElementById('outer_div');
  const targetDiv = document.getElementById('inner_div_' + idx);
  
  // 计算目标div相对于外层div的左侧偏移量
  const targetOffsetLeft = targetDiv.offsetLeft;
  // 让外层div滚动到目标位置
  outerDiv.scrollTo({ left: targetOffsetLeft, behavior: 'auto' });
  
  // 保险起见，强制页面保持顶部
  window.scrollTo(0, 0);
}

为什么之前的window.scrollTo没生效？ #

因为scrollIntoView的滚动行为是浏览器的重排操作，可能在你的scrollTo执行后才完成，覆盖了你的回滚指令。用requestAnimationFrame或直接操作外层div的滚动，可以避免这个时序问题。

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