scrollIntoView與鍵盤遮擋

沒有色彩的FE發表於2018-08-12

開始

最近碰到h5頁鍵盤遮擋輸入框,很是頭痛,後發現一個很有用的api方法,可以解決,就是scrollIntoView。

根據 MDN文件的描述,Element.scrollIntoView()方法讓當前的元素滾動到瀏覽器視窗的可視區域內。

相容性

scrollIntoView與鍵盤遮擋

光看相容性,可以看出相容性很不錯,特別實在移動端,適用性高。可以放心使用

用法

1.true:如果為true,元素的頂端將和其所在滾動區的可視區域的頂端對齊。這是這個引數的預設值。

2.false,元素的底端將和其所在滾動區的可視區域的底端對齊

之後是Object型引數,這個物件有兩個選項,也就是物件裡面的key。block與之前的Boolean型引數一致,不過值不再是true和false,是更語義化的start和end。 另一個選項是behavior,MDN上給出三個可取的值,分別是auto、instant與smooth。這個選項決定頁面是如何滾動的,實測auto與instant都是瞬間跳到相應的位置

實際應用

1.實現鍵盤遮擋輸入框
2.代替錨點功能
3.聊天欄最新訊息出現在可視區
等等


相關文章