判断元素是否在可视区内

做图片滚动加载的时候会判断图片是否在可视区域内,如果在就加载原地址图片,下面借用jquery实现这个功能

首先看下面函数

$('#dom').offset().top

//元素的绝对偏移量,指元素的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变

$('#dom').outerHeight()

//元素的实际尺寸,即 height+padding+border

$('#dom').outerHeight(true)

//#dom的实际尺寸及外边距,即 height+padding+border+margin

$(window).scrollTop()

//窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离

$(window).height()

//浏览器窗口可视区域的高度

 

 

第一种情况页面向上滚动(元素跑到最上面并且也看不到啦)

复制代码

$(window).scrollTop()>($('#dom').offset().top+$('#dom').outerHeight())
//如果上面代码为true说明元素不可见

另一种情况就是页面向下滚动(元素跑到最下面并且也看不到啦)

复制代码

$(window).scrollTop()+$(window).height()<$('#dom').offset().top()
//元素的顶部偏移量大于浏览器滚动上去的加上窗口的高度的和(返回值为true)就说明元素在浏览器下面不可见

 

下面把判断元素是否可见的方法写成一个函数可以直接调用

var isVisible = function(selectid) {

var o;

if ('object' === typeof selectid) {

o = selectid;

} else {

o = $(selectid);

}

var of = o.offset();

var w = $(window);

return !(w.scrollTop() > (of.top + o.outerHeight()) || (w.scrollTop() + w.height()) < of.top);

}

 

 

传入jquery的选择器id就可以