通過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() |
視窗滾動的頂部偏移量,即此時頁面的上邊界到可視區域的上邊界的偏移量,簡單的可以理解成整個頁面滾動了多少距離
| 1 | jQuery(window).height() |
瀏覽器視窗可視區域的高度
用腳後跟想想就能想到,在視窗上下滾動的情況下,一個頁面元素的狀態有3種,1.向上滾動超出可視區域,2.向下滾動超出可視區域,3.在可視區域內.很明顯,我們需要的就是1和2兩種情況.
情況1:
由於元素隨頁面向上滾動,所以自然能想到,在頁面頂部偏移量不斷增加的過程中,邊界是從上至下經過一段距離,而這個距離的區域恰好就是元素本身的偏移量加上元素本身的高度,所以當
| 1 |
jQuery(window |
這個表示式結果為true時,表示元素已經向上滾動,並超出了可視區域.
情況2:
與情況1相反,向下滾動的過程,頁面頂部的偏移量是在不斷減少中,所以當它小於元素偏移量與可視區域高度的差值的時候,元素則向下並超出了可視區域,即
| 1 | jQuery(window).scrollTop()<(jQuery('#item').offset().top-jQuery(window).height()) |
那麼結論就是將這兩種情況作或運算即可達到目的.以下表達式結果如果為true,則 #item 不在可視區域內.反之則在可視區域內.
| 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