NextJS移动端scrollIntoView元素无法居中问题求助

问题描述 #

我在移动端浏览器中遇到滚动时元素无法居中的问题，原因是滚动到一定程度时浏览器窗口会缩小。我尝试了多种方法，包括使用react-scroll库和调整CSS属性，但调用相关函数/库时元素始终无法保持居中。

预期行为 #

我期望在移动端浏览器向下滚动页面时，目标元素能始终保持在视口中间位置。

实际行为 #

目前受移动端浏览器窗口特性影响，我跳转至的每个区块都无法垂直居中。

代码示例 #

const scrollToID = (id) => {
    // Close the drawer by changing status to false
    closeDrawer();
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "center",
      });
    }
};

解决方案 #

1. 手动计算滚动偏移，适配视口变化 #

移动端浏览器工具栏隐藏/显示会改变视口高度，导致scrollIntoView的居中计算失效。可以手动计算元素到视口中心的偏移量来修正：

const scrollToID = (id) => {
  closeDrawer();
  const element = document.getElementById(id);
  if (!element) return;

  const viewportCenter = window.innerHeight / 2;
  const elementRect = element.getBoundingClientRect();
  const elementCenter = elementRect.top + elementRect.height / 2;
  const offset = elementCenter - viewportCenter;

  window.scrollBy({
    top: offset,
    behavior: "smooth"
  });
};

2. 固定视口高度，避免工具栏干扰 #

通过meta标签和CSS锁定视口高度，减少工具栏变化带来的影响：

• 在HTML头部添加meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

• 给body设置最小高度：

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

3. 延迟滚动，等待工具栏状态稳定 #

工具栏切换有动画延迟，短暂等待后再执行滚动，能确保视口高度计算准确：

const scrollToID = (id) => {
  closeDrawer();
  // 等待100ms让工具栏动画完成
  setTimeout(() => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "center"
      });
    }
  }, 100);
};

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