在开发移动端的H5应用时,我们经常会遇到一个问题,就是在iOS手机上,当输入框获取焦点并弹出键盘时,键盘会遮挡住页面底部的内容,给用户带来不便。本文将介绍一种很巧妙的解决方案,通过滚动页面的方式,动态的将页面滚动到最底部,以确保底部区域不被键盘遮挡。

H5 IOS 键盘遮挡

解决方案

onFocus 获取焦点弹出键盘的时候,通过 scrollIntoView 方法将页面滚动到最底部,这样就可以确保底部区域不被键盘遮挡。

export function scrollIntoEnd() { let $ele = document.body $ele?.scrollIntoView({ // behavior: 'smooth', // 平滑滚动 block: 'end', }) }

欢迎访问:天问博客