场景
在微信活动页中,页面底部有一块留言区,当输入框获得焦点,软键盘会弹起并将其遮挡
为了避免被遮挡,可以利用JS调整滚动条位置。
测试机型
IPHONE 6 PLUS IOS 9.3.3
魅族 MX5 android 5.1
Window 7 Chrome 58.0.3029.81
代码
// 等软键盘先出现再执行
setTimeout(()=>{
el.scrollTop = el.scrollHeight
},300)
}
问题
在非 IOS 中,可以正常实现滚动到底部。
而 IOS 中,由于当前输入框获取了焦点,导致这种方案不生效。
解决方案
方案一
先让输入框失去焦点,再设置 scrollTop
的值,再获取焦点。
方法二
{
// scrollIntoView 兼容主流移动设备
e.target.scrollIntoView(true)
},300)
}