通过Jquery判断页面元素是否在浏览器的可视区域内
前端开发中,有时需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过Jquery已经封装了一些属性,使用起来更方便些,我们这里就讨论这种Jquery的方式.(伸手党可直接看文章屁股 :cool:) 假设此元素为 #item ,先说几个关键的属性:
1
|
jQuery
(
'#item'
)
.
offset
(
)
.
top
|
1
|
jQuery
(
'#item'
)
.
outerHeight
(
)
|
1
|
jQuery
(
'#item'
)
.
outerHeight
(
true
)
|
1
|
jQuery
(
window
)
.
scrollTop
(
)
|
1
|
jQuery
(
window
)
.
height
(
)
|
用脚后跟想想就能想到,在窗口上下滚动的情况下,一个页面元素的状态有3种,1.向上滚动超出可视区域,2.向下滚动超出可视区域,3.在可视区域内.很明显,我们需要的就是1和2两种情况. 情况1: 由于元素随页面向上滚动,所以自然能想到,在页面顶部偏移量不断增加的过程中,边界是从上至下经过一段距离,而这个距离的区域恰好就是元素本身的偏移量加上元素本身的高度,所以当
1
|
jQuery
(
window
)
.
scrollTop
(
)
>
(
jQuery
(
'#item'
)
.
offset
(
)
.
top
+
jQuery
(
'#item'
)
.
outerHeight
(
)
)
|
情况2: 与情况1相反,向下滚动的过程,页面顶部的偏移量是在不断减少中,所以当它小于元素偏移量与可视区域高度的差值的时候,元素则向下并超出了可视区域,即
1
|
jQuery
(
window
)
.
scrollTop
(
)
<</span>(jQuery('#item').offset().top-jQuery(window).height())
|
那么结论就是将这两种情况作或运算即可达到目的.以下表达式结果如果为 true ,则 #item 不在可视区域内.反之则在可视区域内.
1
|
(
jQuery
(
window
)
.
scrollTop
(
)
>
(
jQuery
(
'#item'
)
.
offset
(
)
.
top
+
jQuery
(
'#item'
)
.
outerHeight
(
)
)
)
||
(
(
jQuery
(
window
)
.
scr
|