scrollIntoView与键盘遮挡

开始

最近碰到h5页键盘遮挡输入框，很是头痛，后发现一个很有用的api方法，可以解决，就是scrollIntoView。

根据 MDN文档的描述，Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。

兼容性

光看兼容性，可以看出兼容性很不错，特别实在移动端,适用性高。可以放心使用

用法

1.true:如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。这是这个参数的默认值。

2.false，元素的底端将和其所在滚动区的可视区域的底端对齐

之后是Object型参数，这个对象有两个选项，也就是对象里面的key。block与之前的Boolean型参数一致，不过值不再是true和false，是更语义化的start和end。 另一个选项是behavior,MDN上给出三个可取的值，分别是auto、instant与smooth。这个选项决定页面是如何滚动的，实测auto与instant都是瞬间跳到相应的位置

实际应用

1.实现键盘遮挡输入框
2.代替锚点功能
3.聊天栏最新消息出现在可视区
等等