当某个DIV在页面上进行查看时,是否可以触发特定的
JavaScript事件？
比方说,我有一个非常大的页面,如2500×2500,我有一个40×40的div位于1980×1250的位置. div不一定是手动定位的,因为内容推送到那里.现在,当用户滚动到div变得可见的点时,是否可以运行一个函数？
解决方法
不自动每次通过将div矩形的坐标与可见页面矩形进行比较,您将不得不捕获滚动事件并检查它.
这是一个最小的例子.
<div id="importantdiv">hello</div>
<script type="text/javascript">
function VisibilityMonitor(element,showfn,hidefn) {
var isshown= false;
function check() {
if (rectsIntersect(getPageRect(),getElementRect(element)) !== isshown) {
isshown= !isshown;
isshown? showfn() : hidefn();
}
};
window.onscroll=window.onresize= check;
check();
}
function getPageRect() {
var isquirks= document.compatMode!=='BackCompat';
var page= isquirks? document.documentElement : document.body;
var x= page.scrollLeft;
var y= page.scrollTop;
var w= 'innerWidth' in window? window.innerWidth : page.clientWidth;
var h= 'innerHeight' in window? window.innerHeight : page.clientHeight;
return [x,y,x+w,y+h];
}
function getElementRect(element) {
var x= 0,y= 0;
var w= element.offsetWidth,h= element.offsetHeight;
while (element.offsetParent!==null) {
x+= element.offsetLeft;
y+= element.offsetTop;
element= element.offsetParent;
}
return [x,y+h];
}
function rectsIntersect(a,b) {
return a[0]<b[2] && a[2]>b[0] && a[1]<b[3] && a[3]>b[1];
}
VisibilityMonitor(
document.getElementById('importantdiv'),function() {
alert('div in view!');
},function() {
alert('div gone away!');
}
);
</script>
你可以通过以下方式来改进：
>使所有祖先拥有溢出滚动或自动的祖先,并调整其滚动位置的上/下协调>检测溢出滚动,自动隐藏裁剪使div脱离屏幕>使用addEventListener / attachEvent允许多个VisibilityMonitor和其他使用resize / scroll事件的东西>一些兼容性hack getElementRect使得协调在某些情况下更准确,一些事件解除绑定,以避免IE6-7内存泄漏,如果你真的需要.
