scrollIntoView和scrollIntoViewIfNeeded

godruoyi 發布于2019-08-21 18:28 / 1632人閱讀

摘要：如果為，元素的底端將和其所在滾動區的可視區域的底端對齊。根據可見區域最靠近元素的哪個邊緣，元素的頂部將與可見區域的頂部邊緣對準，或者元素的底部邊緣將與可見區域的底部邊緣對準。

[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/...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90499.html

前端常用代碼片段(五)

摘要：當運行時，如果不為，則將超時函數推送到事件隊列，并且函數退出，從而使調用堆棧清零。因此，該方法從頭到尾不經過直接遞歸調用即可處理，因此調用堆棧保持清晰，無論迭代次數如何。前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里 1.tap事件點透問題？問題點擊穿透問題：點擊蒙層（mask）上的關閉按鈕，蒙層消失后發現觸...

MoAir 2019-08-23 14:41 評論0 收藏0
一個html標簽到底包含了多少信息(1)

摘要：先來看一段代碼可以看到很多，來整理一下，總共有三大類我自己分的，沒有科學依據除了一些私有屬性方法比如的私有屬性等和一些空的屬性根據類型又分為了幾個小分類普通屬性樣式屬性操作屬性其他對象屬性我不知道的類型下一節詳細分析先來看一段代碼： var dom = document.querySelector(body); for(var i in dom){ console.log(i...

lylwyy2016 2019-08-19 18:31 評論0 收藏0
關于input的一些問題解決方法分享

摘要：輸入框首尾清除空格在中監聽鍵盤事件移動端底部被彈出的鍵盤遮擋輸入框是通過一直放在頁面底部，當點擊進行輸入的時候，就會出現如下圖片情況有的機型會遮擋一些。前言 input是我們接受來自用戶的數據常用標簽，在前端開發中，相信每個人都會用到這個標簽，所以在開發過程中也時候也會遇到一些問題，本文的內容是我在跟input相愛相殺過程中產生的，在此記錄分享一下。如果喜歡的話可以點波贊/關注，支持...

騫諱護 2019-08-22 17:12 評論0 收藏0
關于input的一些問題解決方法分享

摘要：輸入框首尾清除空格在中監聽鍵盤事件移動端底部被彈出的鍵盤遮擋輸入框是通過一直放在頁面底部，當點擊進行輸入的時候，就會出現如下圖片情況有的機型會遮擋一些。前言 input是我們接受來自用戶的數據常用標簽，在前端開發中，相信每個人都會用到這個標簽，所以在開發過程中也時候也會遇到一些問題，本文的內容是我在跟input相愛相殺過程中產生的，在此記錄分享一下。如果喜歡的話可以點波贊/關注，支持...

vibiu 2019-08-29 15:23 評論0 收藏0