Svelte中如何阻止iframe外部父页面抢占滚动导致的卡顿问题

• 页面嵌入全屏绝对定位的单词本iframe，代码如下：

<iframe id="wordBookiFrame" src="/wordBook" style="position:absolute; width:100%; height:100%;"></iframe>

• 智能手机等小屏设备访问时，iframe与主页面均出现滚动条属于预期表现
• 浏览器默认滚动链逻辑存在体验缺陷：滚动到iframe内容边界后继续滑动，主页面会接管滚动行为；后续用户在iframe内反向滚动时，主页面滚动优先级更高，会抢占滚动事件，导致iframe滚动粘滞、卡顿
• 技术约束：项目使用Svelte框架，<body>标签定义在独立入口文件中，没有直接便捷的修改方式
• 已尝试的不稳定方案：iframe显示时监听window的scroll事件，强制调用window.scrollTo(0,0)重置主页面滚动位置，以此规避滚动抢占问题，但实际运行效果时好时坏，可靠性不足。已尝试的代码如下：

if(document.getElementById("wordBookiFrame").style.display == "block") //iframe仅在特定场景下显示
{
   window.addEventListener('scroll',(event) => {
   window.scrollTo(0,0)
   return;
   });
}

核心原则：不要依赖scroll事件触发后重置位置（该逻辑触发时机晚，本身就会带来跳变和不稳定问题），要从根源上切断滚动链，或者在iframe显示时直接锁死主页面滚动能力。

方案1：Svelte组件内直接控制body滚动锁（兼容性最好，无需修改入口文件） #

Svelte生命周期钩子内可以直接操作document对象，不需要把body相关逻辑写到入口文件中，实现逻辑如下：

1. 用响应式变量控制iframe显隐，监听变量状态切换时，直接给body加/移除锁滚动的内联样式
2. 锁滚动前记录当前页面滚动位置，避免解锁后页面出现跳位
3. 组件销毁时自动解锁滚动，避免离开当前页面后全局滚动失效

对应实现代码：

<script>
  import { onDestroy } from 'svelte';

  // 控制iframe显隐的响应式变量，和你原有业务逻辑对齐即可
  let isWordBookShow = false;
  // 存储锁滚动前的页面垂直位置
  let lastScrollY = 0;

  // 响应式监听iframe显隐状态，切换body滚动锁定状态
  $: if (typeof window !== 'undefined') {
    if (isWordBookShow) {
      lastScrollY = window.scrollY;
      // 固定body位置，禁用主页面滚动
      document.body.style.position = 'fixed';
      document.body.style.top = `-${lastScrollY}px`;
      document.body.style.width = '100%';
      document.body.style.overflow = 'hidden';
    } else {
      // 解锁滚动，恢复原页面位置
      document.body.style.position = '';
      document.body.style.top = '';
      document.body.style.width = '';
      document.body.style.overflow = '';
      window.scrollTo(0, lastScrollY);
    }
  }

  // 组件销毁时兜底解锁
  onDestroy(() => {
    if (typeof window !== 'undefined') {
      document.body.style.position = '';
      document.body.style.top = '';
      document.body.style.width = '';
      document.body.style.overflow = '';
      window.scrollTo(0, lastScrollY);
    }
  })
</script>

<iframe 
  id="wordBookiFrame" 
  src="/wordBook" 
  style="position:absolute; width:100%; height:100%; display: {isWordBookShow ? 'block' : 'none'};"
></iframe>

该方案从CSS层面直接禁用主页面滚动能力，浏览器不会触发主页面滚动逻辑，从根源上避免了滚动事件抢占问题，没有JS回调延迟带来的不稳定问题，全端兼容性表现一致。

方案2：CSS属性切断滚动链（实现最轻量） #

如果不需要兼容iOS Safari 16以下版本，可以直接给iframe设置overscroll-behavior属性，阻断滚动事件向父页面传递：

#wordBookiFrame {
  overscroll-behavior: contain;
}

该属性的作用是让元素自身滚动到边界时，不会触发父级容器的滚动行为，不需要额外写JS逻辑。

• scroll事件是滚动行为完成后才触发的，此时主页面已经发生位移，再调用scrollTo重置本身就会产生视觉跳变
• 移动端滚动由独立的合成器线程高优先级处理，JS监听回调的执行时机晚于滚动事件派发，很容易出现回调未执行、页面已经被主页面滚动接管的情况
• 原有逻辑没有在iframe隐藏时移除绑定的scroll事件监听器，事件会持续累积，进一步加剧逻辑异常

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