如何阻止嵌入iframe的Google Slides滚动父页面？

我在页面中嵌入了Google Slides的iframe，代码如下：

<div id="google-slides-iframe-container">
    <iframe id="google-slides-iframe" src="https://docs.google.com/presentation/d/1_zfj0xr6bOTZcGOPR4ASOVCccg5zvDrGrU3XxUUe5Ik/embed" frameborder="0"></iframe>
</div>

遇到的问题是：当页面滚动后，iframe仅显示一部分时，点击幻灯片切换按钮，父页面会自动滚动到iframe顶部，小屏幕上用户体验极差。试过鼠标跟踪法，但在平板触摸操作时失效；尝试重写scrollIntoView原型也没效果，尚未尝试重写scrollTop()函数。另外这个问题五年前就提交给W3C但未获回应，目前没有官方解决方案。

可行解决方案 #

1. 将iframe放入可滚动容器（推荐）

通过给iframe容器设置固定高度和滚动属性，把iframe的滚动范围限制在容器内，彻底分离父页面和iframe的滚动行为，从根源避免切换幻灯片影响父页面：

#google-slides-iframe-container {
  height: 80vh; /* 根据需求调整高度，比如占视口80% */
  overflow: auto;
  border: none; /* 可选，去掉默认边框 */
}
#google-slides-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

这样用户滚动的是容器而非父页面，切换幻灯片时不会触发父页面的滚动跳转，同时适配触摸操作。

2. 监控父页面滚动并恢复位置

通过监听父页面的滚动事件，检测是否是iframe触发的异常滚动，强制恢复之前的滚动位置：

let lastScrollPos = window.scrollY;

window.addEventListener('scroll', (e) => {
  const container = document.getElementById('google-slides-iframe-container');
  const containerTop = container.offsetTop;
  // 判断是否是突然跳转到iframe顶部的异常滚动
  if (Math.abs(window.scrollY - containerTop) < 10 && Math.abs(window.scrollY - lastScrollPos) > 50) {
    e.preventDefault();
    window.scrollTo(0, lastScrollPos);
  }
  lastScrollPos = window.scrollY;
}, { passive: false });

注意：这个方法可能存在误判（比如用户主动滚动到iframe顶部的情况），需要根据实际场景调整阈值。

3. 禁用滚动锚定行为

尝试给父页面的body或iframe容器设置overflow-anchor: none，阻止浏览器的滚动锚定机制（部分场景有效）：

body {
  overflow-anchor: none;
}

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