在水平滚动容器中嵌入多个 iframe 时，用户在 iframe 区域内使用触控板双指横向滑动会意外触发浏览器历史导航（前进/后退），而非容器本身的水平滚动；通过为 iframe 添加 scrolling="no" 属性可有效禁用 iframe 自身的滚动行为，确保手势始终作用于外层容器。
在水平滚动容器中嵌入多个 iframe 时，用户在 iframe 区域内使用触控板双指横向滑动会意外触发浏览器历史导航（前进/后退），而非容器本身的水平滚动；通过为 iframe 添加 `scrolling="no"` 属性可有效禁用 iframe 自身的滚动行为，确保手势始终作用于外层容器。
当 iframe 被嵌入到一个支持水平滚动的布局（如 overflow-x-auto 容器）中时，其默认行为可能干扰用户体验：iframe 会捕获并响应横向滚动手势，进而触发浏览器的历史导航（即 history.forward() / history.back()）——这是由部分浏览器（尤其是 Safari 和 Chrome 在 macOS 上）对 <iframe></iframe> 内部滚动事件的特殊处理所致，与 iframe 内容是否可滚动无关。
解决的关键在于显式禁用 iframe 的内部滚动能力。虽然 scrolling="no" 是一个已废弃但被广泛支持的 HTML 属性（HTML5 中已不推荐，但浏览器仍保留兼容性），它能可靠地阻止 iframe 自身产生滚动机制，从而将所有横向滑动手势“透传”给父容器处理。
以下是修复后的完整代码示例（React + Tailwind CSS）：
<div className="flex overflow-x-auto snap-x snap-mandatory scrollbar-hide">
{VIDEOS.map((url) => (
<div className="p-4 bg-red-200 flex-none" key={url}>
<iframe
className="flex-none aspect-video w-full max-w-xs"
src={url}
title="video-player"
scrolling="no" {/* ✅ 核心修复：禁用 iframe 内部滚动 */}
sandbox="allow-scripts allow-same-origin allow-presentation"
loading="lazy"
/>
</div>
))}
</div>⚠️ 注意事项：
-
scrolling="no"不影响 iframe 外部容器的滚动，仅关闭 iframe 自身的滚动条与滚动事件捕获； - 现代替代方案（如
sandbox属性或 CSStouch-action: none）不能替代scrolling="no"——touch-action: none会完全禁用触摸滚动，破坏用户体验；而sandbox主要用于安全隔离，不控制滚动行为； - 若 iframe 内容本身需要纵向滚动（如长表单），
scrolling="no"将一并禁用，此时需权衡设计：建议优先保证容器级水平滚动体验，必要时改用postMessage与 iframe 内容协同控制滚动； - 为增强可访问性，可补充
title属性，并确保容器支持键盘导航（如tabindex="0"+ArrowLeft/Right监听）。
总结：scrolling="no" 是当前最简洁、兼容性最佳且语义明确的解决方案。它不依赖 JavaScript，无运行时开销，能从根本上切断 iframe 对横向手势的劫持，让水平滚动容器回归预期行为。
