scrollIntoView和scrollIntoViewIfNeeded

[TOC]

scrollIntoView系列

移動web頁面，input獲取焦點彈出系統虛擬鍵盤時，偶爾會出現擋住input的狀況，儘管機率不大，可是十分影響用戶體驗。

scrollIntoView

element.scrollIntoView(alignToTop);

alignToTop

Boolean

• 若是爲true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。
• 若是爲false，元素的底端將和其所在滾動區的可視區域的底端對齊。

scrollIntoViewIfNeeded

Element.scrollIntoViewIfNeeded(opt_center)

opt_center

Boolean 默認true

• 若是爲true，則元素將在其所在滾動區的可視區域中居中對其。
• 若是爲false，則元素將與其所在滾動區的可視區域最近的邊緣對齊。 根據可見區域最靠近元素的哪一個邊緣，元素的頂部將與可見區域的頂部邊緣對準，或者元素的底部邊緣將與可見區域的底部邊緣對準。

推薦使用 scrollIntoViewIfNeeded

代碼實例

$('input').on('click', function () {
            var target = this;
            // 使用定時器是爲了讓輸入框上滑時更加天然
            setTimeout(function(){
               // target.scrollIntoView(true);
               target.scrollIntoViewIfNeeded(true); // 推薦使用
            },100);
        });

參考:

https://github.com/justjavac/...