scrollIntoView与键盘遮挡

856 阅读1分钟

开始

最近碰到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.聊天栏最新消息出现在可视区
等等