输入框首次focus时滚动无效，二次focus正常的解决方法咨询

• 延迟执行滚动逻辑：首次触发focus时，DOM可能还没完成更新，导致滚动计算的位置不准。用requestAnimationFrame或短延迟的setTimeout确保元素位置确定后再执行滚动：

  inputElement.addEventListener('focus', () => {
    requestAnimationFrame(() => {
      window.scrollTo({
        top: inputElement.offsetTop - 50, // 可根据需求调整偏移量
        behavior: 'smooth'
      });
    });
  });
  

• 确认元素挂载状态：如果输入框是动态生成的，首次focus时可能还没完全挂载到DOM，导致无法获取正确位置。确保在DOM加载完成后再绑定focus事件：

  document.addEventListener('DOMContentLoaded', () => {
    const inputElement = document.getElementById('target-input');
    inputElement.addEventListener('focus', () => {
      window.scrollTo({
        top: inputElement.offsetTop - 50,
        behavior: 'smooth'
      });
    });
  });
  

• 改用scrollIntoView方法：手动计算scrollTop容易受DOM状态影响，直接用scrollIntoView更可靠，它会自动处理元素可见性：

  inputElement.addEventListener('focus', () => {
    inputElement.scrollIntoView({
      behavior: 'smooth',
      block: 'start' // 让元素顶部与视口顶部对齐
    });
  });
  

• 排查事件冲突：检查是否有其他初始化代码（比如autofocus、入场动画）在首次focus时干扰了滚动逻辑，暂时禁用这些代码测试是否恢复正常。

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