通過Jquery判斷頁面元素是否在瀏覽器的可視區域內

前端開發中,有時需要判斷某個元素是否在瀏覽器的可視區域內,或者是否已經滾動出了可視區域.首先想到的便是javascript操作,原生方法自然可以,不過Jquery已經封裝了一些屬性,使用起來更方便些,我們這裏就討論這種Jquery的方式.(伸手黨可直接看文章屁股 :cool:)

假設此元素爲 #item,先說幾個關鍵的屬性:

JavaScript

1	jQuery('#item').offset().top

#item 的絕對偏移量,指#item的實際尺寸(即不包括外邊框margin)的上邊界到頁面頂端的距離.這個值不隨窗口滾動而改變

JavaScript

1	jQuery('#item').outerHeight()

#item 的實際尺寸,即 height+padding+border

JavaScript

1	jQuery('#item').outerHeight(true)

#item的實際尺寸及外邊距,即 height+padding+border+margin

JavaScript

1	jQuery(window).scrollTop()

窗口滾動的頂部偏移量,即此時頁面的上邊界到可視區域的上邊界的偏移量,簡單的可以理解成整個頁面滾動了多少距離

JavaScript

1	jQuery(window).height()

瀏覽器窗口可視區域的高度


用腳後跟想想就能想到,在窗口上下滾動的情況下,一個頁面元素的狀態有3種,1.向上滾動超出可視區域,2.向下滾動超出可視區域,3.在可視區域內.很明顯,我們需要的就是1和2兩種情況.

情況1:
由於元素隨頁面向上滾動,所以自然能想到,在頁面頂部偏移量不斷增加的過程中,邊界是從上至下經過一段距離,而這個距離的區域恰好就是元素本身的偏移量加上元素本身的高度,所以當

JavaScript

1	jQuery(window).scrollTop()>(jQuery('#item').offset().top+jQuery('#item').outerHeight())

這個表達式結果爲true時,表示元素已經向上滾動,並超出了可視區域.

情況2:
與情況1相反,向下滾動的過程,頁面頂部的偏移量是在不斷減少中,所以當它小於元素偏移量與可視區域高度的差值的時候,元素則向下並超出了可視區域,即

JavaScript

1	jQuery(window).scrollTop()<(jQuery('#item').offset().top-jQuery(window).height())

那麼結論就是將這兩種情況作或運算即可達到目的.以下表達式結果如果爲true,則 #item 不在可視區域內.反之則在可視區域內.

JavaScript

1	(jQuery(window).scrollTop()>(jQuery('#item').offset().top+jQuery('#item').outerHeight()))||((jQuery(window).scrollTop()+jQuery(window).height())<jQuery('#item').offset().top)

或許還有更優的算法,我暫時還沒想到,湊合用吧

感謝原文作者分享：http://www.txd.me/1120.html