开始
最近碰到h5页键盘遮挡输入框,很是头痛,后发现一个很有用的api方法,可以解决,就是scrollIntoView。
根据 的描述,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.聊天栏最新消息出现在可视区等等