如何在横向滚动iframe时阻止浏览器/页面导航？

核心原因 #

浏览器默认会把触控板/双指的边界滚动（比如滚动到页面顶/底后继续滑动）映射为前进/后退的历史导航手势，当你在iframe内发起这类滚动时，就会触发这个默认行为。

解决方案 #

1. 同源iframe（自己的页面） #

直接在iframe内部的页面添加CSS，限制滚动溢出行为：

body {
  /* 阻止所有方向的边界滚动触发浏览器导航 */
  overscroll-behavior: contain;
  /* 仅针对横向导航手势的话，用overscroll-behavior-x: contain; */
}

这个属性会把滚动限制在iframe内部，不会触发浏览器的全局导航。

2. 第三方/跨域iframe（无法修改内部代码） #

方法A：给iframe外层容器加样式

给包裹iframe的div添加overscroll-behavior: contain，让容器接管滚动边界的行为：

<div className="flex overflow-x-auto">
  {VIDEOS.map((url) => (
    <div className="p-4 bg-red-200" style={{ overscrollBehavior: 'contain' }} key={url}>
      <iframe
        className="flex-none aspect-video"
        src={url}
      ></iframe>
    </div>
  ))}
</div>

方法B：禁用iframe内部滚动（适合不需要内部滚动的场景）

给iframe添加scrolling="no"属性，直接禁止iframe内部的滚动：

<iframe
  className="flex-none aspect-video"
  src={url}
  scrolling="no"
></iframe>

方法C：监听滚动事件阻止默认（同源可用）

如果需要保留iframe内部滚动，同时阻止边界导航，可以在父页面监听滚动事件，判断是否到达边界后阻止默认行为：

document.querySelectorAll('.p-4.bg-red-200').forEach(wrapper => {
  wrapper.addEventListener('wheel', (e) => {
    const iframe = wrapper.querySelector('iframe');
    const scrollEl = iframe.contentWindow.document.scrollingElement;
    const isAtTop = scrollEl.scrollTop === 0;
    const isAtBottom = scrollEl.scrollHeight - scrollEl.scrollTop === iframe.contentWindow.innerHeight;

    // 当滚动到顶/底且继续滚动时，阻止默认导航
    if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
      e.preventDefault();
    }
  }, { passive: false });
});

注意：这个方法仅适合同源iframe，跨域时无法访问iframe内部的滚动状态。

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