点击video元素移位主因是焦点触发滚动锚定或:focus样式重排；修复优先设tabindex="-1"、禁用outline、preventDefault()及避免transform缩放。
HTML5 元素点击后发生移位，通常不是视频本身的行为，而是 CSS 布局、事件监听或浏览器渲染机制引发的副作用。直接原因是：点击触发了焦点获取（tabindex 或默认可聚焦行为），导致滚动锚定（scroll anchoring）或 :focus 样式重排，或父容器使用了不稳定的定位方式。
为什么点击
现代浏览器（Chrome 82+、Edge 90+）默认启用 scroll-anchor-positioning，当元素获得焦点且其所在视口位置“不稳定”时，浏览器会尝试自动微调滚动位置以保持焦点元素可见——这在 上尤其明显，因为原生控件点击会触发 focus 事件，而若该 video 没有显式设置 tabindex="-1" 或禁用焦点，就可能被纳入焦点流。
-
默认是可聚焦的（尤其在加了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 干扰。进一步确认可检查：
立即学习“前端免费学习笔记（深入）”；
- DevTools → Application → Rendering → 勾选 “Scroll Anchoring” 查看是否高亮激活
- 在 Elements 面板中右键 video 元素 → “Break on” → “attribute modifications”，点一下，看是否触发
class或style变更 - 执行
getComputedStyle(video).outline，确认是否有非none的 outline 值残留
稳定修复方案（按优先级排序）
最有效的方式是切断焦点干扰链，而非强行覆盖滚动逻辑：
- 给
添加tabindex="-1"，并确保不响应键盘焦点： - 显式禁用 focus 样式（含 outline 和任何
:focus下的 transform/margin 变化）：video:focus { outline: none; outline-offset: 0; } - 若用 JS 绑定 click，务必加
e.preventDefault()（尤其在自定义播放按钮上）：video.addEventListener('click', e => { e.preventDefault(); video.play(); }); - 避免对
或其 wrapper 使用transform: scale()、perspective等触发合成层变更的属性；改用width/height缩放
真正麻烦的不是移位本身，而是它常和第三方 UI 库（如某些弹窗组件、无障碍增强脚本）的焦点管理逻辑耦合。一旦发现加了 tabindex="-1" 还移位，要立刻检查是否有外部脚本在 focusin 事件里调用了 element.scrollIntoView() —— 这类隐式滚动比浏览器原生锚定更难追踪。
