移动端输入框激活软键盘后，调用 scrollintoview 常因键盘未及时收起而失效；本文提供兼容 chrome for android 等主流移动浏览器的可靠解决方案：先主动隐藏键盘，再延迟执行滚动逻辑。
在移动 Web 开发中，scrollIntoView() 是实现用户交互后自动定位目标元素的常用手段。然而，当该方法在软键盘（Onscreen Keyboard）仍处于激活状态时被调用，尤其在 Chrome for Android 上，常出现“元素已显示但页面未滚动”的问题——这并非 scrollIntoView 失效，而是浏览器渲染层尚未完成键盘收起后的布局重排（reflow），导致滚动时机被阻塞。
根本原因在于：软键盘占据屏幕空间会触发视口（viewport）缩放与重计算，而 scrollIntoView 的执行依赖于当前可视区域的准确尺寸。若键盘尚未完全收起，block: "center" 等定位参数将基于错误的视口坐标计算，最终滚动失败或偏移。
✅ 推荐解决方案是 两阶段异步控制：
- 主动触发软键盘收起；
- 在键盘收起完成后再执行 DOM 显示与滚动。
以下为经过生产验证的实现方式：
function hideKeyboard(element) {
// 临时禁用输入框以强制键盘收起
element.setAttribute('readonly', 'readonly');
element.setAttribute('disabled', 'true');
setTimeout(() => {
element.blur(); // 触发失焦，真正关闭键盘
// 恢复输入框可用性
element.removeAttribute('readonly');
element.removeAttribute('disabled');
}, 100);
}
function searchBarSelectProduct(itemCode) {
const searchBarInput = document.getElementById("searchBar");
hideKeyboard(searchBarInput);
// 确保键盘收起后再操作 DOM 和滚动
setTimeout(() => {
const resultContainer = document.getElementById("searchBarResultsContainer");
resultContainer.classList.add("hidden");
const itemCard = document.getElementById(`itemCard-${itemCode}`);
if (itemCard) {
itemCard.classList.remove("hidden");
// 使用平滑滚动 + 中心对齐，提升用户体验
itemCard.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "nearest"
});
}
}, 150); // 略长于 hideKeyboard 的 timeout，留出安全余量
}⚠️ 注意事项：
- 延迟时间非固定值：100ms/150ms 是经验推荐值，实际可依据设备性能微调（如低端安卓机建议增至 200ms）；
- 元素存在性校验：务必检查 itemCard 是否存在，避免 null.scrollIntoView() 报错；
- 无障碍兼容性：scrollIntoView({ behavior: "smooth" }) 在部分旧版 iOS Safari 中不支持，如需兼容，可降级为 behavior: "auto" 或添加 polyfill；
- 替代方案探索：若对首屏性能敏感，也可监听 resize 或 focusout 事件，在键盘收起后立即触发滚动，但需注意事件冒泡与竞态条件。
该方案已在 Android Chrome、Samsung Internet、Edge Mobile 等主流浏览器中稳定运行，兼顾可靠性与代码简洁性，是解决“键盘干扰滚动”问题的工程化最佳实践。
