判斷DOM元素是否出現再瀏覽器視窗中

幾乎所有的專案都要解決這樣乙個問題：判斷乙個元素是否出現在瀏覽器視窗中？因為通過它我們可以極大的優化專案的效能，進而提公升使用者的的體驗。

所涉及的業務實現，比較常見的就是電商平台或者是展示類的**。電商**，如：**、京東等；展示類，如：花瓣，pinterest。

涉及的技術，如：lazyload技術動態的載入（元素），無限載入技術，包括基於骨架屏技術載入靜態資源。

這些業務和技術的目的都是為了為了解決低網速情況下使用web應用，如果頁面內內容沒有載入，那麼就會造成低使用者體驗。

這些業務和使用的技術基本上都用了判斷頁面的元素是否出現在瀏覽器視窗中。

現在通用的是基於瀏覽器的視窗的判斷

那麼何為基於瀏覽器視窗的判斷呢？這要通過dom的api.getboundingclientrect()，獲取目標元素距離瀏覽器視窗的位置座標(top, left) 或者（x, y）座標，所以說是基於瀏覽器視窗的。我們可以拖動瀏覽器的滾動條來使目標元素從瀏覽器的頂端進入瀏覽器視窗（這可以判斷上邊界），也可以從瀏覽器的底部進入瀏覽器視窗（這可以判斷下邊界），而這正好是判斷目標元素進入瀏覽器視窗的邊界。

上邊界：

下邊界：

目標元素的頂部剛好和瀏覽器的底部重合，當滾動條向上滾動，目標元素從頂部部開始一點點的出現，直到目標元素整個出現在瀏覽器視窗，反之，則逐漸遠離。

我們可以瀏覽器的滾動條向下滾動(也可以按照向下滾動，答案類似)寫出如下的**：

var clienrect = el.getboundingclientrect();
if (clientrect.top > -clientrect.width && clientrect.top < window.innerheight) {}
// 或者
if (clientrect.bottom > 0 && clientrect.top =< window.innerheight) {}

有的同學可能會問，是不是視窗的高度小於目標元素的高度，或者視窗的高度大於目標元素的高度都這樣都一樣呢？我想說一樣，因為這裡是根據兩個邊界得出的結論。

var clienrect = el.getboundingclientrect();
if (clientrect.top > 0 && clientrect.top < window.innerheight - clientrect.width) {}
// 或者
if (clientrect.top >= 0 && clientrect.bottom > window.innerheight) {}

相容性可參考can i use

基於document文件的頂部來判斷

這裡要使用的是dom元素的.offsettop來計算目標元素的頂部邊界到document文件的頂部邊界的距離，使用window的.pageyoffset來計算當瀏覽器滾動條滾動時document文件捲起的高度，通過比較這兩個高度，我們就可以輕鬆的判斷目標元素是否出現在瀏覽器視窗內。

當目標元素的上邊界和瀏覽器視窗的下邊界重合，目標元素的offsettop是個定值，所以此時document文件捲起的高度和目標元素的offsettop之間存在這樣乙個等式：window.innerheight + window.pageyoffset = el.offsettop。若繼續向下滾動瀏覽器的滾動條，目標元素將出現在瀏覽器當中，我們都知道window.pageyoffset的值將繼續變大，由於el.offsettop和window.innerheight都是個定值，所以我們可以得到這樣乙個邊界條件，當window.pageyoffset > el.offsettop - window.innerheight，目標元素從瀏覽器視窗的底部逐漸出現。

當瀏覽器的滾動條繼續向上滾動會出現目標元素的下邊界和瀏覽器視窗的上邊界重合的情況，當繼續向下滾動滾動條元素將從瀏覽器視窗消失，此時存在這樣乙個等式：window.pageyoffset + el.offsetheight = el.offsettop，所以很明顯，如果window.pageyoffset的值繼續增大，目標元素將消失與瀏覽器視窗，因此，很明顯，只有window.pageyoffset < el.offsettop - el.offsetheight目標元素才會出現在瀏覽器視窗內。

if (window.pageyoffset > el.offsettop - window.innerheight && window.pageyoffset < el.offsettop - el.offsetheight) {}

if (window.pageyoffset > el.offsettop - window.innerheight - el.offsetheight && window.pageyoffset < el.offsettop) {}

雖然這種方法也可以，但它的瀏覽器相容性不如第一種。

posted @

2018-12-13 13:33

棲息地閱讀(

...)

編輯收藏

判斷DOM元素是否出現再瀏覽器視窗中

判斷DOM元素是否出現再瀏覽器視窗中

js 判斷瀏覽器是否IE瀏覽器

js 判斷瀏覽器是否IE瀏覽器

判斷DOM元素是否出現再瀏覽器視窗中

判斷DOM元素是否出現再瀏覽器視窗中

js 判斷瀏覽器是否IE瀏覽器

js 判斷瀏覽器是否IE瀏覽器

相關推薦