如何在执行scrollIntoView后获取DOM元素的准确坐标？

你的问题核心在于平滑滚动是异步操作，scrollIntoView({ behavior: 'smooth' })调用后会立即返回，同步执行的getBoundingClientRect()自然拿到的是滚动前的坐标。以下是可行的解决方案：

正确做法：监听scrollend事件 #

浏览器的scrollend事件会在滚动（包括平滑滚动）完全结束后触发，我们可以利用这个事件确保在滚动完成后再获取元素坐标：

const modalBody = document.querySelector('.modal-body');
const nextModalBtn = document.querySelector('#nextBtn');
const myModal = document.querySelector('#your-modal-selector'); // 补充模态框选择器

const elementsList = ['#a', '#b', '#c'];
const modalInfo = ['foo', 'bar', 'foobar'];
let count = 0;

const handleScrollEnd = (element) => {
  // 获取滚动完成后的元素坐标
  const rect = element.getBoundingClientRect();
  const top = rect.top + window.scrollY;
  const left = rect.left + window.scrollX;

  // 更新模态框内容和位置
  modalBody.innerHTML = modalInfo[count]; // 修正原代码拼写错误：innerHtml → innerHTML
  myModal.style.top = `${top}px`;
  myModal.style.left = `${left}px`;

  count++;
  // 移除事件监听，避免重复触发
  window.removeEventListener('scrollend', handleScrollEnd);
};

const myFunction = () => {
  if (count >= elementsList.length) return; // 防止数组越界

  const element = document.querySelector(elementsList[count]);
  element.scrollIntoView({ behavior: 'smooth', block: 'center' });

  // 绑定scrollend事件，滚动完成后执行坐标获取逻辑
  window.addEventListener('scrollend', () => handleScrollEnd(element));
};

nextModalBtn.addEventListener('click', myFunction); // 修正原代码拼写错误：addEventlistener → addEventListener

为什么之前的方法无效？ #

• 关闭平滑滚动：behavior: 'auto'是立即滚动，但部分浏览器仍需要等待一次重绘才能更新元素坐标，同步代码还是会拿到旧值。
• setTimeout：100ms的延迟无法适配所有场景（比如滚动距离长、设备性能差），延迟太短会失效，太长会导致交互卡顿。
• jQuery offset()：该方法本质基于getBoundingClientRect()和滚动位置计算，同样会受滚动异步的影响。

补充：兼容旧浏览器 #

如果需要兼容不支持scrollend事件的旧版浏览器，可以用requestAnimationFrame轮询判断滚动是否停止：

const waitForScrollEnd = (element, callback) => {
  let lastScrollTop = window.scrollY;
  let lastScrollLeft = window.scrollX;

  const checkScrollEnd = () => {
    if (window.scrollY === lastScrollTop && window.scrollX === lastScrollLeft) {
      callback();
    } else {
      lastScrollTop = window.scrollY;
      lastScrollLeft = window.scrollX;
      requestAnimationFrame(checkScrollEnd);
    }
  };

  requestAnimationFrame(checkScrollEnd);
};

// 在myFunction里替换scrollend监听：
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
waitForScrollEnd(element, () => handleScrollEnd(element));

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