安卓webview/chrome中scrollintoview()常失效，因软键盘弹出前已触发focus、window.innerheight未更新、滚动时机错位，需监听resize事件、延迟执行、结合getboundingclientrect()动态判断遮挡并滚动。
安卓 WebView 或 Chrome 中，input 和 textarea 被软键盘遮挡，不是 CSS 写得不对，而是 Android 对 window.innerHeight 的更新滞后、滚动时机错位、以及原生输入法与 H5 渲染层的协调缺失——直接调 scrollIntoView() 往往无效，必须配合延迟、目标判断和 viewport 行为控制。
为什么 scrollIntoView() 在安卓上经常失效
Android 浏览器（尤其旧版 Chrome 和 WebView）在软键盘弹出前就触发了 focus 事件，此时 window.innerHeight 还没变，scrollIntoView() 滚动的是“键盘还没出来时”的视口位置，结果滚完键盘才弹，输入框又被盖住。
- 不要监听
focus，改用resize：键盘弹出会触发window的resize，更可靠 - 延迟不是可选，是必须：至少
setTimeout(..., 100)，部分低端机需400–600ms - 避免用
scrollIntoViewIfNeeded()：它在很多 Android WebView 中未实现或行为异常，优先用scrollIntoView({ block: 'nearest', inline: 'start' }) - 别依赖
document.body.scrollTop：安卓下常为0，统一用document.documentElement.scrollTop或直接操作元素
resize + getBoundingClientRect() 动态定位输入框
靠 window.innerHeight 变化判断键盘状态比监听事件更稳定，再结合元素位置计算是否真被遮挡，只对需要的输入框滚动。
- 监听
resize，记录上次window.innerHeight - 当前高度比上次小 > 150px，视为键盘弹出；恢复后大回原值，视为收起
- 获取
document.activeElement的getBoundingClientRect()，检查bottom > window.innerHeight - 满足遮挡条件时，调用
activeElement.scrollIntoView({ block: 'nearest' }) - 收起时可选：
setTimeout(() => window.scrollTo(0, 0), 100)避免残留偏移
let lastHeight = window.innerHeight;
window.addEventListener('resize', () => {
const currentHeight = window.innerHeight;
const el = document.activeElement;
if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA')) {
if (currentHeight {
const rect = el.getBoundingClientRect();
if (rect.bottom > window.innerHeight) {
el.scrollIntoView({ block: 'nearest' });
}
}, 200);
}
}
lastHeight = currentHeight;
});
AndroidManifest.xml 中必须配 android:windowSoftInputMode
纯前端 JS 无法绕过系统级窗口行为。若你用的是 Cordova、Capacitor 或自建 WebView，这步漏掉，JS 滚动再准也白搭。
- 推荐值：
adjustResize—— 页面整体上推，保留可滚动区域 - 禁用
adjustPan：它强制把输入框“平移”到可视区，但会裁剪页面、破坏布局流 - 不要写
stateVisible：它会让键盘默认弹出，干扰用户操作流 - 示例配置：
android:windowSoftInputMode="adjustResize"放在对应<activity></activity>标签内
CSS 层面要防死锁：避免 position: fixed + 底部输入框
如果输入框父容器用了 position: fixed; bottom: 0，JS 滚动根本不起作用——fixed 元素脱离文档流，scrollIntoView() 对它无效，且 resize 后它的计算位置也不更新。
- 底部输入框应放在普通文档流中，用
margin-bottom或 flex 布局预留空间 - 若必须 fixed，改用 JS 动态设
top：监听键盘后计算window.innerHeight - keyboardHeight - 所有含
overflow: hidden的祖先容器都会截断滚动，检查并移除 - viewport meta 标签必须带
height=device-height，否则部分安卓机型不更新innerHeight
最易被忽略的一点：很多团队只测了 Chrome，却忘了 WebView 的 UA 和渲染行为差异更大；scrollIntoView 的兼容性在 Android 7–9 的系统 WebView 中尤其脆弱，务必在真机上验证 resize 触发时机和 getBoundingClientRect() 返回值——有时候它返回的是相对于 iframe 的坐标，不是视口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
