JavaScript 中节点操作怎么利用 element.focus 控制焦点并传入 preventScroll 选项-js教程-PHP中文网

focus() 的 preventScroll 选项用于禁用聚焦时页面自动滚动到元素的行为；默认会滚动至元素可见区域，而 preventScroll: true 可保持当前滚动位置，需以对象形式传入布尔值 true。

javascript 中节点操作怎么利用 element.focus 控制焦点并传入 preventscroll 选项

element.focus() 是 JavaScript 中控制元素获得焦点的核心方法，从 Chrome 86 和 Firefox 103 开始，它支持一个可选的配置对象，其中 preventScroll 是关键选项之一，用于防止聚焦时页面自动滚动到该元素位置。

focus() 的 preventScroll 选项有什么用？

默认情况下，调用 focus() 会让浏览器将视口滚动到目标元素可见区域（尤其当元素在视口外时）。这在某些场景下不友好——比如弹窗内表单聚焦、键盘导航中途切换、或需要保持当前滚动位置时。preventScroll: true 就是用来禁用这个自动滚动行为的。

怎么正确传入 preventScroll 选项？

必须以对象形式传入，不能直接传布尔值。语法如下：

✅ 正确写法：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

inputElement.focus({ preventScroll: true });

❌ 错误写法：

inputElement.focus(true);（老式布尔参数已废弃）
inputElement.focus({ preventScroll: 'true' });（必须是布尔值，不是字符串）
inputElement.focus({ preventScroll: 1 });（非布尔值会被忽略）

哪些元素支持 focus() 和 preventScroll？

只有可聚焦元素才有效，包括：

、、
带 tabindex 属性的任意元素（如 ）
、等原生可聚焦元素


不可聚焦元素（如普通 
 无 tabindex）调用 focus() 无效，也不会报错，preventScroll 自然不生效。实际使用建议

在模态框打开后自动聚焦首个输入框时，加上 { preventScroll: true }，避免页面跳动干扰用户当前浏览位置
  实现键盘导航（如 Tab 切换）时，手动聚焦下一个元素前可统一加该选项，保持滚动一致性
  兼容性注意：Safari 目前（截至 Safari 17.4）仍不支持 preventScroll，需降级处理（例如先记录 scrollTop，聚焦后再恢复）
  如果同时需要设置其他选项（如 focusVisible: false），可合并写在同一个对象里：el.focus({ preventScroll: true, focusVisible: false })