Android 手機下輸入框獲取焦點時, 輸入法擋住輸入框的 bug

DOM的滾動

DOM規範中並無規定各瀏覽器須要實現怎樣的滾動頁面區域，各瀏覽器實現了相應的方法，可使用不一樣的方式控制頁面區域的滾動。這些方法做爲HTMLElement類型的擴展存在，因此它能在全部元素上使用。

一、scrollIntoView(alignWithTop)  滾動瀏覽器窗口或容器元素，以便在當前視窗的可見範圍看見當前元素。若是alignWithTop爲true，或者省略它，窗口會盡量滾動到自身頂部與元素頂部平齊。-------目前各瀏覽器均支持

二、scrollIntoViewIfNeeded(alignCenter) 只在當前元素在視窗的可見範圍內不可見的狀況下，才滾動瀏覽器窗口或容器元素，最終讓當前元素可見。若是當前元素在視窗中可見，這個方法不作任何處理。若是將可選參數alignCenter設置爲true，則表示儘可能將元素顯示在視窗中部（垂直方向）------Safari、Chrome實現了這個方法

三、scrollByLines(lineCount) 將元素的內容滾動指定的行數的高度，lineCount的值能夠爲正值或是負值。---Safari、Chrome實現了這個方法

四、scrollByPages(pageCount) 將元素的內容滾動指定的頁面的高度，具體高度由元素的高度決定。---Safari、Chrome實現了這個方法

 

scrollIntoView()和scrollIntoVIewIfNeeded()做用的是元素的窗口，而scrollByLines()、scrollByPages()影響元素自身，下面是幾個示例：

//將頁面主體滾動5行

document.body.scrollByLines(5);

 

//確保當前元素可見

document.getElementById(「test」).scrollIntoView();   //

//true:對象的頂端與當前窗口的頂部對齊

//false:對象的底端與當前窗口的頂部對齊

 

//確保只在當前元素不可見的狀況下才使其可見

document.getElementById(「test」).scrollIntoViewIfNeeded();

 

//將頁面主體往回滾1頁

doument.body.scrollByPages(-1);

因爲只有scrollIntoView被各瀏覽器均支持，因此這個方法最爲經常使用

 

function androidInputBugFix(){　　//  Android 手機下輸入框獲取焦點時, 輸入法擋住輸入框的 bug　　// 相關 issue: https://github.com/weui/weui/issues/15　　// 解決方法:　　//  參考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element　　// Android 手機下, input 或 textarea 元素聚焦時, 主動滾一把　　if (/Android/gi.test(navigator.userAgent)) {　　　　window.addEventListener('resize', function () {　　　　　　if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {　　　　　　　　window.setTimeout(function () {　　　　　　　　document.activeElement.scrollIntoViewIfNeeded();　　　　　　}, 0);　　　　}})　　}}