如何阻止iframe调用元素focus方法时父文档发生滚动？

原因说明 #

这是浏览器的默认聚焦行为：当元素调用focus()方法时，浏览器会逐级向上调整所有父级浏览上下文的滚动位置，确保被聚焦的元素在顶层页面也处于可视区域，因此会触发父页面跟随滚动。

解决方案 #

场景1：可修改iframe内部代码（最优方案）

调用focus时添加preventScroll参数禁用默认滚动行为，之后手动调用scrollIntoView仅在iframe内部滚动到目标元素即可：

// iframe 内部修改原focus逻辑
const targetEl = document.querySelector('#target');
// 禁用默认的全局滚动逻辑
targetEl.focus({ preventScroll: true });
// 仅在iframe内部滚动到目标元素
targetEl.scrollIntoView({ block: 'nearest' });

场景2：仅能修改父页面代码（无法控制iframe内部逻辑）

同域iframe方案

直接给iframe内部的focus方法打补丁，默认注入preventScroll参数：

const iframe = document.querySelector('iframe');
iframe.addEventListener('load', () => {
  const rawFocus = iframe.contentWindow.Element.prototype.focus;
  iframe.contentWindow.Element.prototype.focus = function (options = {}) {
    options.preventScroll = true;
    return rawFocus.call(this, options);
  };
});

跨域iframe方案

通过临时拦截父页面滚动事件，在iframe加载后的短时间内锁定父页面滚动位置，覆盖iframe内部focus触发的滚动时机：

let blockParentScroll = false;
let originScrollY = window.scrollY;

const iframe = document.querySelector('iframe');
iframe.addEventListener('load', () => {
  blockParentScroll = true;
  originScrollY = window.scrollY;
  // 可根据实际场景调整拦截时长，默认300ms足够覆盖绝大多数focus触发滚动的场景
  setTimeout(() => blockParentScroll = false, 300);
});

// 补充：适配iframe内部多次动态触发focus的场景
window.addEventListener('blur', () => {
  if (document.activeElement === iframe) {
    blockParentScroll = true;
    originScrollY = window.scrollY;
    setTimeout(() => blockParentScroll = false, 300);
  }
});

window.addEventListener('scroll', () => {
  if (blockParentScroll) {
    window.scrollTo(0, originScrollY);
  }
});

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