请教js如何判断某个对象是否出现在窗口里了？js如何判断某个对象是否出现在窗口里了？比如一个页面有很多行，在页面的最下端有个对象A，需要拖动scroll才能看到。那么如何判断对象A已出现在了当前窗口里了？拖动scroll的判断我知道
$(window).scroll(function () {
// console.log('scroll...');
});
$(window).scroll(function () {
// console.log('scroll...');
});
2. $(element).offset().left $(elem).offset().top获取相对的左上角坐标.
3. 已经知道scroll的方法, 便结合起来做简单的加减运算即可
function getAbsPoint (e)
{
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent)
{
x += e.offsetLeft;
y += e.offsetTop;
}
return {'x': x, 'y': y};
};/********************
* 取窗口可视范围的高度
*******************/
function getClientHeight(doc)
{
doc=doc||document;
return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?doc.body.clientHeight:doc.documentElement.clientHeight;
};
/********************
* 取窗口可视范围的宽度
*******************/
function getClientWidth()
{
return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientWidth:document.documentElement.clientWidth;
};
/********************
* 取窗口滚动条滚动高度
******************/
function getScrollTop()
{
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
};
if(window.addEventListener){
window.addEventListener('scroll', function(e){ checkPoint(); },false);
}else{
window.attachEvent('onscroll',function(){ checkPoint(); ); });
}
var obj;// 要验证的空间
var p;
function checkPoint(){
p=p||getAbsPoint(obj);
if(getClientHeight()+getScrollTop <= p.y)// 只判断了垂直方向，如果有水平滚动条，还要考虑水平方向，你自己加
{
alert("不在可见区域");
}else{
alert("在可见区域");
}}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function () {
a1=$(this).scrollTop();
a2=$('#t1').offset().top;
console.log(a2,a1,a2-a1);
});
});
</script>
</head><body><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<p id='t1'>abc</p>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/></body>
</html>