点击video元素移位主因是焦点触发滚动锚定或:focus样式重排；修复优先设tabindex="-1"、禁用outline、preventDefault()及避免transform缩放。
HTML5 <video></video> 元素点击后发生移位，通常不是视频本身的行为，而是 CSS 布局、事件监听或浏览器渲染机制引发的副作用。直接原因是：点击触发了焦点获取（tabindex 或默认可聚焦行为），导致滚动锚定（scroll anchoring）或 :focus 样式重排，或父容器使用了不稳定的定位方式。
为什么点击 <video></video> 会触发页面移位？
现代浏览器（Chrome 82+、Edge 90+）默认启用 scroll-anchor-positioning，当元素获得焦点且其所在视口位置“不稳定”时，浏览器会尝试自动微调滚动位置以保持焦点元素可见——这在 <video></video> 上尤其明显，因为原生控件点击会触发 focus 事件，而若该 video 没有显式设置 tabindex="-1" 或禁用焦点，就可能被纳入焦点流。
-
<video></video>默认是可聚焦的（尤其在加了controls属性时） - 父容器用了
position: relative+transform或scale，点击后触发重绘/重排，造成视觉跳动 - CSS 中存在
video:focus { outline: none; }但未同时设outline-offset: 0，部分浏览器仍会预留 outline 空间再清除，引起回流 - 移动端 Safari 在全屏切换前后会重置
scrollTop，若页面监听了click却没阻止默认行为，也可能误触滚动
如何快速验证是否为焦点滚动锚定导致？
打开 DevTools → Console，运行以下命令临时关闭锚定机制：
document.documentElement.style['scroll-behavior'] = 'auto';
再点击视频，观察是否还移位。若消失，说明就是 scroll anchoring 干扰。进一步确认可检查：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- DevTools → Application → Rendering → 勾选 “Scroll Anchoring” 查看是否高亮激活
- 在 Elements 面板中右键 video 元素 → “Break on” → “attribute modifications”，点一下，看是否触发
class或style变更 - 执行
getComputedStyle(video).outline，确认是否有非none的 outline 值残留
稳定修复方案（按优先级排序）
最有效的方式是切断焦点干扰链，而非强行覆盖滚动逻辑：
- 给
<video></video>添加tabindex="-1"，并确保不响应键盘焦点：<video controls tabindex="-1"></video> - 显式禁用 focus 样式（含 outline 和任何
:focus下的 transform/margin 变化）：video:focus { outline: none; outline-offset: 0; } - 若用 JS 绑定 click，务必加
e.preventDefault()（尤其在自定义播放按钮上）：video.addEventListener('click', e => { e.preventDefault(); video.play(); }); - 避免对
<video></video>或其 wrapper 使用transform: scale()、perspective等触发合成层变更的属性；改用width/height缩放
真正麻烦的不是移位本身，而是它常和第三方 UI 库（如某些弹窗组件、无障碍增强脚本）的焦点管理逻辑耦合。一旦发现加了 tabindex="-1" 还移位，要立刻检查是否有外部脚本在 focusin 事件里调用了 element.scrollIntoView() —— 这类隐式滚动比浏览器原生锚定更难追踪。
