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

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

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

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

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

jQuery('#item').outerHeight()

item 的實(shí)際尺寸,即 height+padding+border

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

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

jQuery(window).scrollTop()

窗口滾動(dòng)的頂部偏移量,即此時(shí)頁(yè)面的上邊界到可視區(qū)域的上邊界的偏移量,簡(jiǎn)單的可以理解成整個(gè)頁(yè)面滾動(dòng)了多少距離

jQuery(window).height()

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

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

情況1:

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

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

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

情況2:

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

jQuery(window).scrollTop()

那么結(jié)論就是將這兩種情況作或運(yùn)算即可達(dá)到目的.以下表達(dá)式結(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張圖片都被點(diǎn)擊過(guò)，并且是按順序點(diǎn)擊的

請(qǐng)問(wèn)有沒(méi)有跨平臺(tái)的集群管理軟件？

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

php關(guān)于可變類(lèi)名的疑問(wèn)

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

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

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

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

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

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

php 設(shè)計(jì)問(wèn)題，我寫(xiě)了一個(gè)Config類(lèi)，讀取配置文件

spring mvc無(wú)法進(jìn)入controller

多tab下ajax動(dòng)態(tài)分頁(yè)

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

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

使用了七牛云儲(chǔ)存水印樣式后分享到qq空間出錯(cuò)

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

手機(jī)前端開(kāi)發(fā)

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

ios app崩潰的時(shí)候如何通過(guò)代碼層面確定崩潰位置

總結(jié)

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

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