嵌入Google Sheet的iframe加载后使父页面滚动至(0,0)的问题求助

当长页面中嵌入的Google Sheet iframe处于加载状态时，滚动到该区域会触发页面自动跳回(0,0)位置，这是因为iframe加载过程中可能触发了意外的滚动指令，或者页面布局因iframe未加载完成发生偏移。以下是几种可行的解决方案：

1. 记录滚动位置并自动恢复 #

通过监听页面滚动保存当前位置，在iframe加载期间定期检查是否发生异常跳顶，一旦发生就恢复之前的滚动位置：

// 保存当前滚动位置
let savedScrollY = window.scrollY;

// 监听页面滚动，实时更新保存的位置
window.addEventListener('scroll', () => {
  savedScrollY = window.scrollY;
});

const sheetIframe = document.getElementById('google-sheet-iframe');

// 开始加载时启动滚动检查
sheetIframe.addEventListener('loadstart', () => {
  const checkScroll = setInterval(() => {
    // 若页面跳回顶部且之前有滚动记录，恢复位置
    if (window.scrollY === 0 && savedScrollY !== 0) {
      window.scrollTo(0, savedScrollY);
    }
  }, 50);

  // 加载完成后停止检查
  sheetIframe.addEventListener('load', () => {
    clearInterval(checkScroll);
  }, { once: true });
});

2. 添加占位容器稳定页面布局 #

iframe加载完成前，页面会因iframe高度为0或未确定导致布局跳动，进而引发滚动偏移。给iframe添加一个固定尺寸的占位容器，确保页面布局稳定：

/* 占位容器样式，尺寸与iframe一致 */
.iframe-placeholder {
  width: 100%;
  height: 600px; /* 对应iframe的height属性值 */
  min-height: 600px;
}

<div class="iframe-placeholder">
  <iframe id="google-sheet-iframe" 
          src="你的Google Sheet嵌入链接" 
          width="100%" 
          height="600" 
          frameborder="0"
          loading="lazy"></iframe>
</div>

添加loading="lazy"还能让iframe按需加载，减少不必要的加载触发。

3. 拦截异常滚动事件 #

通过监听全局滚动事件，在iframe加载期间拦截跳回顶部的异常行为：

let isIframeLoading = false;
const sheetIframe = document.getElementById('google-sheet-iframe');

sheetIframe.addEventListener('loadstart', () => {
  isIframeLoading = true;
});

sheetIframe.addEventListener('load', () => {
  isIframeLoading = false;
}, { once: true });

// 拦截异常滚动
window.addEventListener('scroll', (e) => {
  if (isIframeLoading && window.scrollY === 0 && savedScrollY !== 0) {
    e.preventDefault();
    window.scrollTo(0, savedScrollY);
  }
}, { passive: false });

注意：passive: false会让滚动事件变为非被动，可能影响页面滚动性能，建议优先使用第一种方法。

内容的提问来源于stack exchange，提问作者Arun Selva Kumar