要实现输入框获取焦点时平滑滚动到可见区域，需延迟调用 scrollIntoView({behavior:'smooth',block:'nearest',inline:'nearest'})，iOS 下结合 visualViewport.height 修正偏移，并包裹于可滚动容器中防键盘遮挡。
在移动端 H5 页面中，当用户点击输入框（input 或 textarea）触发软键盘弹出时，浏览器常会自动滚动页面，但默认行为往往不够精准——可能遮挡输入框、滚动过快、或定位不准。要实现「获取焦点时平滑滚动到可见区域」，核心是手动控制滚动 + 避免系统默认滚动干扰。
监听 focus 事件并阻止默认聚焦滚动
移动端浏览器（尤其 iOS Safari）在 focus 时会强制滚动，影响自定义逻辑。可在 focus 事件中调用 preventDefault()（需配合 touchstart 等前置事件启用），但更稳妥的方式是：延迟执行滚动，并用 scrollIntoView 覆盖默认行为。
- 给输入框绑定
focus事件，使用setTimeout延迟 100–300ms 执行滚动（等待软键盘开始弹出、布局重排完成） - 避免在
focus同步调用scrollIntoView，否则可能被浏览器覆盖 - iOS 下可额外监听
resize（软键盘弹出会触发 viewport 高度变化），作为兜底滚动时机
用 scrollIntoView 实现平滑且精准定位
element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }) 是现代方案首选。关键在于参数选择：
-
behavior: 'smooth'启用 CSS 平滑滚动（需确保scroll-behavior: smooth已设在html或body上） -
block: 'nearest'让元素尽可能不滚动（顶部/底部已可见则不动），比'center'更自然，避免过度滚动 -
inline: 'nearest'处理横向溢出情况（如 RTL 或横向滚动容器内） - 若输入框在
position: fixed/sticky容器中，需确保该容器本身可滚动或向上查找可滚动祖先
兼容 iOS 键盘遮挡问题（重点）
iOS Safari 的软键盘会压缩 viewport 高度，导致 scrollIntoView 计算位置偏移。解决方法：
- 在
focus后、滚动前，读取当前window.visualViewport?.height（iOS 支持）或window.innerHeight，估算键盘高度（如对比screen.height） - 手动计算目标位置：滚动至
input.offsetTop - keyboardHeight + 20（预留安全间距），再用window.scrollTo({ top, behavior: 'smooth' }) - 更可靠做法：将输入框包裹在可滚动容器（如
div[style="max-height: 100vh; overflow-y: auto"]）中，让容器内部滚动，而非整个页面
补充：禁用浏览器自动滚动的辅助策略
部分安卓 WebView 或老版本浏览器仍会抢跑滚动。可叠加以下控制：
- 给
body添加scroll-behavior: smooth，统一滚动行为 - 输入框获得焦点时，临时设置
body.style.position = 'fixed'（慎用，可能影响布局），失焦后恢复 - 使用
element.getBoundingClientRect()判断是否已在视口内：rect.top >= 0 && rect.bottom ，仅在不可见时滚动 - 对
textarea等可拉伸控件，在focus后强制scrollTop = 0防止内部滚动干扰
不复杂但容易忽略的是时机和兼容性平衡——不必追求 100% 一致，优先保障 iOS 可用，再渐进增强安卓体验。核心就三点：延迟执行、用 scrollIntoView + nearest、针对 iOS 补偿键盘高度。
