Jquery判斷頁面元素是否在瀏覽器的可視區(qū)域內(nèi)

前端開發(fā)中,有時需要判斷某個元素是否在瀏覽器的可視區(qū)域內(nèi),或者是否已經(jīng)滾動出了可視區(qū)域.首先想到的便是javascript操作,原生方法自然可以,不過Jquery已經(jīng)封裝了一些屬性,使用起來更方便些,我們這里就討論這種Jquery的方式.

假設(shè)此元素為 #item,先說幾個關(guān)鍵的屬性:

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

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

jQuery('#item').outerHeight()

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

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

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

jQuery(window).scrollTop()

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

jQuery(window).height()

瀏覽器窗口可視區(qū)域的高度

在窗口上下滾動的情況下,一個頁面元素的狀態(tài)有3種,1.向上滾動超出可視區(qū)域,2.向下滾動超出可視區(qū)域,3.在可視區(qū)域內(nèi).很明顯,我們需要的就是1和2兩種情況.

情況1:

由于元素隨頁面向上滾動,所以自然能想到,在頁面頂部偏移量不斷增加的過程中,邊界是從上至下經(jīng)過一段距離,而這個距離的區(qū)域恰好就是元素本身的偏移量加上元素本身的高度,所以當(dāng)

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

這個表達式結(jié)果為true時,表示元素已經(jīng)向上滾動,并超出了可視區(qū)域.

情況2:

與情況1相反,向下滾動的過程,頁面頂部的偏移量是在不斷減少中,所以當(dāng)它小于元素偏移量與可視區(qū)域高度的差值的時候,元素則向下并超出了可視區(qū)域,即

jQuery(window).scrollTop()

那么結(jié)論就是將這兩種情況作或運算即可達到目的.以下表達式結(jié)果如果為true,則 #item 不在可視區(qū)域內(nèi).反之則在可視區(qū)域內(nèi).

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

參考文章

相關(guān)閱讀:

jquery如何判斷3張圖片都被點擊過，并且是按順序點擊的

請問有沒有跨平臺的集群管理軟件？

一個關(guān)于slice的問題

php關(guān)于可變類名的疑問

resin出現(xiàn)沒響應(yīng)的情況，有什么方法查看產(chǎn)生問題的原因？

停用硬件加速后，canvas渲染速度變快了？

大家怎樣通過模板導(dǎo)出word

對已授權(quán)的微信用戶，怎么能更換他的頭像呢？

一個AJAX請求如何獲取后端口多次返回的狀態(tài)信息

標(biāo)簽怎么修改播放器按鈕的樣式

php 設(shè)計問題，我寫了一個Config類，讀取配置文件

spring mvc無法進入controller

多tab下ajax動態(tài)分頁

怎樣獲取鼠標(biāo)懸停1秒后的位置

margin: 150 auto;這種方式不能居中嗎？

使用了七牛云儲存水印樣式后分享到qq空間出錯

如何用C語言實現(xiàn)采用共享內(nèi)存的進程間通信？

手機前端開發(fā)

less的函數(shù)內(nèi)只能寫css屬性？能寫css選擇器嗎？

ios app崩潰的時候如何通過代碼層面確定崩潰位置

總結(jié)

以上是生活随笔為你收集整理的php开发是可视的吗,javascript,html_Jquery判断页面元素是否在浏览器的可视区域内，javascript,html,css,html5 - phpStudy...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。