移动端底部input被弹出的键盘遮挡的解决办法

input输入框是通过position定位一直放在页面底部，当点击input进行输入的时候，部分机型（尤其是ios系统）底部input被弹出的键盘遮挡，如何解决这个问题呢？

在解决这个问题的时候，有试过下面这种方法:

在input的focus事件中，开启一个定时器，然后每隔300毫秒进行一次document.body.scrollTop=document.body.scrollHeight的调整，运行3次即可。

然而实际体验确差强人意，于是就找到了一下这个办法：

Element.scrollIntoView()

Element.scrollIntoView():方法让当前的元素滚动到浏览器窗口的可视区域内。

    document.querySelector('#inputId').scrollIntoView();
    //只要在input的点击事件，或者获取焦点的事件中，加入这个api就好了

• 1
• 2
• 3

这个api还可以设置对齐方法，选择将input放在屏幕的上方/下方，这个api还常用于以下效果：

类似的api还有:Element.scrollIntoViewIfNeeded()，这两个是解决同一个问题的，选择一个用就可以了。