解決移動端彈出鍵盤時遮擋輸入框

最近做一個移動端的頁面，有一個輸入框是放在了頁面的底部，當點擊輸入框彈出輸入法虛擬鍵盤的時候，出現了虛擬鍵盤遮擋輸入框的情況，雖然手動向上滑動頁面將輸入框滑到可視范圍內，但在一定程度上影響了用戶體驗，若能解決掉這個問題，最好不過了，到網上查了一下，很顯然不止我一個人遇到這種問題，而解決方案，居然也很簡單，那就是借助一個很多人可能都沒見過的瀏覽器原生 API。

Element.scrolltoView()

盡可能（向上或向下）滾動瀏覽器窗口或容器元素，以便在當前視窗的可見范圍看見當前元素。

存在三個重載參數：

element.scrollIntoView();

不顯示聲明任何參數，則相當於是element.scrollIntoView(true)
 

element.scrollIntoView(alignToTop);

Boolean類型參數
如果為 true，則元素的頂部將盡可能滾動到與父元素可見區域頂部對齊的位置，這是默認值。
如果為 false，則元素的底部將盡可能滾動到與父元素可見區域底部對齊的位置
 

element.scrollIntoView(scrollIntoViewOptions);

Object類型參數

{
behavior: 'auto' | 'instant' | 'smooth',
block: 'start' | 'end'
}

behavior：定義了元素滾動的行為，instant代表是立即滾動元素，smooth代表動畫性的平滑滾動，但大部分瀏覽器並不支持smooth這個屬性值，一般都是 instant。
block：定義了元素滾動的方向，對應Boolean類型參數，如果設置了start值，則相當於是設置了element.scrollIntoView(true)，如果設置了end值，則相當於是設置了element.scrollIntoView(false)，
需要注意的是，無論是滾動到父元素的頂部還是底部，並不代表子元素會完全滾動到那個位置，瀏覽器只是盡可能讓子元素完全與父元素頂部或者底部對齊，但也有可能滾動到的位置距離父元素頂部或者底部還差一些距離，這取決於頁面中其他元素的布局。

至於其兼容性，MDN上說這是一個實驗性的 API，並不在 DOM規范中，但到 caniuse.com上一看，發現幾乎所有瀏覽器都支持這個 API：

 

MDN上示例如下：

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({block: "end", behavior: "smooth"});

 

Element.scrollIntoViewIfNeeded()
只在當前元素在視窗的可見范圍內不可見的情況下，才滾動瀏覽器窗口或容器元素，最終讓當前元素可見。如果當前元素在視窗中已經可見了，那么這個方法將不做任何處理，此方法是對Element.scrolltoView()的進一步補充。

存在一個Boolean類型參數：

Element.scrollIntoViewIfNeeded(opt_center)

如果設置為 true,並且當前元素在視窗的可見范圍內不可見，元素將盡量滾動到父元素可視區域的中部位置（垂直方向）
如果設置為 false,並且當前元素在視窗的可見范圍內不可見，元素將盡量滾動到父元素可視區域距離最近的一邊，至於到底滾動到父元素的頂部還是底部，取決於滾動的子元素距離父元素的哪一邊比較近。
MDN 聲明此API是非標准的方法，支持的瀏覽器也比較少，不過如果只是考慮移動端的場景，那么完全是可以使用的。

————————————————
版權聲明：本文為CSDN博主「Quiet-Night」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/deeplies/article/details/74388061

 

 

js解決---（微信內置瀏覽器瀏覽H5頁面彈出的鍵盤遮蓋文本框的解決辦法 ）

$(function() {
    //微信內置瀏覽器瀏覽H5頁面彈出的鍵盤遮蓋文本框的解決辦法 
    window.addEventListener("resize", function() {
        if(document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
            window.setTimeout(function() {
                document.activeElement.scrollIntoViewIfNeeded();
            }, 0);
        }
    })
})

 

喜歡這篇文章？歡迎打賞~~