输入框聚焦时页面被顶上去,键盘收起后页面停在半空,顶部空出一大块,要手动滑一下才回位,挺影响体验。乍看像缓存或者权限的锅,追下去往往不是。
input.addEventListener('blur', () => {
setTimeout(() => {
window.scrollTo({ top: 0, behavior: 'instant' });
}, 200);
});
追下去是这么回事:iOS 键盘弹起时改变的是滚动位置不是视口高度,scrollIntoView 调得太早,键盘还没收完页面就被定位到中间。这个偏差很常见,等键盘动画结束再滚。
「键盘收起页面偏移」这类改动最怕改一半,回滚脚本先准备好,再动生产。接口问题先分清是没发出去、发出去了没收到,还是收到了处理失败。
偶发问题先统计频率,一小时几次和一天一次,查法完全不同。
具体做法是,在 blur 回调里延迟两百毫秒,再执行滚回顶部,太早滚会被键盘顶回去;滚回顶部用 scrollTo,行为参数写 instant,别用平滑滚动,平滑会被键盘动画打断;别在 focus 时就把整个 body 的滚动锁死,收起后解不开,锁定容易忘了解。
验收就看一点,键盘收起后页面自动回到原位,顶部不留空白,也不用再手动滑。
