移动端 Input 文本框获取焦点后,会弹起软键盘输入,此时的窗口大小已发生改变,经过测试发现 iPhone 可以自动上滑页面,但是 Android 页面没有任何滑动。
HTML 5 有个函数可以实现页面滑动,Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内,于是就有了下面的方法。
window.addEventListener('resize', () => {
const activeElement = document.activeElement
if (activeElement.tagName === 'INPUT' ||
activeElement.tagName === 'TEXTAREA') {
setTimeout(() => {
activeElement.scrollIntoView()
}, 100)
}
})
当 Window 窗口发生变化时候,获取当前的焦点元素(document.activeElement),然后使用 scrollIntoView 函数让当前的元素滚动到浏览器窗口的可视区域内。

