html 元素在可视区域,js(jquery)判断页面内的元素是否在浏览器的可视区域内

jquery实现

做图片滚动加载的时候会判断图片是否在可视区域内,如果在就加载原地址图片,下面借用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()

//元素的顶部偏移量大于浏览器滚动上去的加上窗口的高度的和(返回值为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()) 

}

传入jquery的选择器id就可以

原生js实现var isVisible = function(dom) {

var scrTop = document.documentElement.scrollTop || document.body.scrollTop;

return !(scrTop > (dom.offsetTop + dom.offsetHeight) || (scrTop + window.innerHeight) 

}

var dom = document.getElementById('loadmorebtn');

console.log(isVisible(dom))

兼容性只在谷歌测试过，其它浏览器没有测试