场景

在微信活动页中，页面底部有一块留言区，当输入框获得焦点，软键盘会弹起并将其遮挡

为了避免被遮挡，可以利用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)
}