使用scrollIntoView仅横向滚动时如何避免页面垂直跳动？

核心原因 #

scrollIntoView API 设计上会同时控制水平、垂直两个方向的滚动位置，block 配置项仅能调整垂直方向的对齐规则（可选值为start/center/end/nearest），无法完全禁用垂直方向的滚动调整逻辑，所以只要目标元素在垂直方向不符合当前设置的对齐规则，就会触发垂直滚动。

推荐解决方案：改用scrollTo实现精准横向滚动 #

直接计算目标元素在横向滚动容器中的左偏移量，调用容器的scrollTo方法仅设置横向滚动距离，完全不会触发垂直方向的滚动调整，稳定性最高：

if (itemEl.dataset.index === feature.dataset.index) {
  // 替换为你实际的横向滚动容器选择器
  const scrollContainer = document.querySelector('.carousel-container');
  // 计算目标元素相对于滚动容器的左偏移
  const targetScrollLeft = feature.offsetLeft - scrollContainer.offsetLeft;
  // 仅滚动横向方向
  scrollContainer.scrollTo({
    left: targetScrollLeft,
    behavior: 'smooth'
  })
}

如果滚动容器是整个页面，替换scrollContainer为window即可。

备选临时方案：固定垂直滚动位置 #

如果不想修改原有scrollIntoView逻辑，可以在调用前记录当前垂直滚动位置，滚动完成后立刻重置垂直滚动位置。注意该方案在平滑滚动时可能出现轻微的垂直方向闪烁，优先推荐第一种方案：

if (itemEl.dataset.index === feature.dataset.index) {
  // 如果是容器内滚动，替换为对应容器的scrollTop值
  const originalScrollTop = window.scrollY;
  feature.scrollIntoView({ 
    behavior: 'smooth', 
    inline: 'start',
    // 选nearest可以最大程度降低垂直滚动的幅度
    block: 'nearest' 
  });
  // 立刻重置垂直滚动位置
  window.scrollTo({ top: originalScrollTop });
}

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