如何使用JavaScript滚动到指定元素？scrollIntoView不生效该如何解决？

问题根因 #

你触发滚动的时机早于浏览器完成目标元素的显式渲染：执行classList.remove("d-none")、classList.add("d-block")之后，浏览器需要完成重排（reflow）、重绘（repaint）才能让元素真正处于可见可交互状态，同步执行的scrollIntoView此时操作的是未完成渲染的元素，所以滚动失效。手动在控制台执行时元素已经完成渲染，所以能正常生效。

无固定延时的解决方案 #

方案1：双层requestAnimationFrame（最简便，适合普通场景）

requestAnimationFrame的回调会在浏览器下次重绘前执行，嵌套两层即可保证滚动逻辑在当前DOM更新的重绘完成后执行，不需要设置固定等待时长：

document.getElementById("general_details_edit").addEventListener("click", function(){
  this.style.display = "none";
  const targetCard = document.getElementById("general_details_card");
  targetCard.classList.remove("d-none");
  targetCard.classList.add("d-block");

  // 双层嵌套保证等待渲染完成后执行滚动
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      targetCard.scrollIntoView({behavior : 'smooth', block: 'end'});
    })
  })
});

方案2：ResizeObserver监听（更精准，适合带动态内容的复杂场景）

如果卡片内部还有异步加载的内容（比如图片、接口返回的动态渲染内容），可以用ResizeObserver监听目标元素的尺寸变化，当元素从隐藏（尺寸为0）变为显示状态时自动触发滚动：

// 监听逻辑初始化，全局仅需执行一次
const targetCard = document.getElementById("general_details_card");
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // 元素高度大于0说明已渲染为可见状态
    if(entry.contentRect.height > 0) {
      targetCard.scrollIntoView({behavior : 'smooth', block: 'end'});
      // 触发一次后取消监听，避免重复执行
      resizeObserver.unobserve(targetCard);
    }
  }
})

document.getElementById("general_details_edit").addEventListener("click", function(){
  this.style.display = "none";
  // 先开启监听，再修改元素显示状态
  resizeObserver.observe(targetCard);
  targetCard.classList.remove("d-none");
  targetCard.classList.add("d-block");
});

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