在focus事件中调用scrollintoview({ block: 'nearest', inline: 'nearest' })最有效，需绑定到input/textarea、避免smooth动画，并配合正确viewport meta（含height=device-height且user-scalable=yes）；安卓需改用resize+延迟+边界判断，blur时须防抖回位。
focus事件里调scrollIntoView最省事
按钮被键盘遮挡，本质不是按钮本身的问题，而是它所在的输入框失焦后页面没回位，或者输入框聚焦时根本没滚到可视区——scrollIntoView({ block: 'nearest', inline: 'nearest' })在focus事件中执行，能直接把输入框（连带右侧按钮）拉进视口，避免被盖住。
常见错误现象：click里调、touchstart里调、或等resize再调，结果时机全错：Android常在键盘弹出前就触发focus，iOS有时又延迟；但只要在focus回调里立刻执行，90%场景稳住。
- 必须绑定到
input或textarea元素，不是按钮本身 - 别用
behavior: 'smooth'——老版微信X5内核不支持，直接删掉更稳妥 - 参数选
{ block: 'nearest', inline: 'nearest' }，避免把光标顶出顶部
viewport meta标签写错会让所有JS失效
很多问题根本不是scrollIntoView没写对，而是<meta name="viewport">锁死了visualViewport高度，浏览器压根不通知键盘弹起。
关键两点必须满足：
-
height=device-height必须存在，否则iOS Safari的window.innerHeight在键盘弹出后不变，JS无法感知遮挡 -
user-scalable=no必须禁用——它会让iOS忽略键盘弹出时的viewport重绘，visualViewport.height永远等于屏幕高度
推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, height=device-height">。Android对height=device-height支持弱，但至少不会让情况更糟；而user-scalable=no在iOS上是静默破坏，比不写还危险。
安卓WebView中scrollIntoView常失效的补救方案
安卓上scrollIntoView()经常白跑，因为键盘弹出前就触发了focus，此时window.innerHeight还没变，滚动位置算错了。
正确做法是换监听源+加延迟+动态判断：
- 改用
resize事件，比focus或focusin更可靠 - 必须加
setTimeout，至少100ms，低端机可能要400–600ms - 用
getBoundingClientRect()检查bottom > window.innerHeight，只在真被遮挡时才滚动 - 别依赖
document.body.scrollTop——安卓下常为0，统一用document.documentElement.scrollTop或直接操作元素
示例逻辑：if (currentHeight { if (rect.bottom > window.innerHeight) el.scrollIntoView({ block: 'nearest' }); }, 200); }
键盘收起后页面卡在错误位置
focus时滚上去了，blur时不处理，页面就悬在半空——用户再点别的地方，光标可能直接消失。
必须监听blur，配合防抖（比如200ms），再调一次回位：
- 记录
lastScrollTop要在focus前一刻取，不是靠document.body.scrollTop（iOS上常为0） - 更可靠方式：
const lastScrollTop = window.visualViewport?.pageTop || window.pageYOffset; - 别用
window.scroll(0, 0)硬滚回顶部，会打断用户浏览上下文
这个环节最容易被跳过，但恰恰是用户体验断层的关键点：一次没回位，用户就会觉得“页面卡了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
