如何解决HTML如何判断哪些元素可见?
| 我已经看到了几种解决方案,这些解决方案确定了在滚动页面时何时在视口中显示某个元素,但是我没有看到针对滚动容器div
中包含的元素执行此操作的任何方法,如此处的示例所示。
当项目通过滚动div滚动进入视图时,我将如何检测?相比之下,如果它们不可见,我将如何检测到它们。在所有情况下,溢出元素一开始都不会被隐藏。
的HTML
<div id=\"mainContainer\" class=\"main\">
<div id=\"scrollContainer\"class=\"scroller\">
<div id=\"picturesContainer\"class=\"holder\">
<div id=\"pictureContainer1\" class=\"picture position1\">
pictureContainer1</div>
<div id=\"pictureContainer2\" class=\"picture position2\">
pictureContainer2</div>
<div id=\"pictureContainer3\" class=\"picture position3\">
pictureContainer3</div>
<div id=\"pictureContainer4\" class=\"picture position4\">
pictureContainer4</div>
<div id=\"pictureContainer5\" class=\"picture position5\">
pictureContainer5</div>
<div id=\"pictureContainer6\" class=\"picture position6\">
pictureContainer6</div>
<div id=\"pictureContainer7\" class=\"picture position7\">
pictureContainer7</div>
<div id=\"pictureContainer8\" class=\"picture position8\">
pictureContainer8</div>
<div id=\"pictureContainer9\" class=\"picture position9\">
pictureContainer9</div>
</div>
</div>
</div>
的CSS
.main{
position:absolute;
top:0px;
left:0px;
height: 200px;
width:200px;
background-color: grey;
border: 1px solid black;
}
.scroller{
position:absolute;
top:0px;
left:0px;
height: 250px;
width:250px;
background-color: lightblue;
border: 1px solid black;
overflow: scroll;
}
.picture{
position:absolute;
height: 200px;
width: 200px;
background-color: lightyellow;
border: 1px solid black;
}
.position1{
top:0px;
left:0px;
}
.position2{
top:0px;
left:200px;
}
.position3{
top:0px;
left:400px;
}
.position4{
top:200px;
left:0px;
}
.position5{
top:200px;
left:200px;
}
.position6{
top:200px;
left:400px;
}
.position7{
top:400px;
left:0px;
}
.position8{
top:400px;
left:200px;
}
.position9{
top:400px;
left:400px;
}
.holder{
position:absolute;
top:0px;
left:0px;
width:600px;
height:600px;
background-color:lightgreen;
}
解决方法
首先在页面上包含jQuery库。
function getObjDims(obj){
if (!obj) return false;
var off = $(obj).offset();
var t = {
top:off.top,left:off.left,width:$(obj).width(),height:$(obj).height()
};
return {x1:t.left,y1:t.top,x2:t.left+t.width,y2:t.top+t.height}
};
function testInside(pic,box){
var d=getObjDims(pic);
return (box.x1<=d.x1 && box.y1<=d.y1 && box.x2>=d.x2 && box.y2>=d.y2)?1:-1;
};
$(document).ready(function(){
var inside={};
var port=$(\'#scrollContainer\');
var box=getObjDims(port);
$(window).resize(function(){
box=getObjDims(port);
});
$(port).scroll(function(){
var str=[];
$(\'.picture\').each(function(i){
var oldState = inside[this.id]!=undefined?inside[this.id]:0;
var newState = testInside(this,box);
inside[this.id]=newState;
if (oldState!=newState)
switch (newState){
case 1:str.push(this.id);break;// go IN
case -1: break;// go OUT
}
});
$(\'#picStatus\').text(str.join(\',\'));
});
});
添加HTML以输出结果:
<div style=\'margin-top:280px;\'>Pictures in window (numbers):</div>
<div id=\'picStatus\'></div>
它是基于对象坐标的代码,在滚动事件时会重新计算。有一些事情要知道。 IE和Opera都考虑到滚动条本身的宽度和高度,这需要幕帘代码调整。我只是建议了解决方案的方向,并没有花费很多时间来调试它。
但是,下面的内容(从有关偏移量的jquery api)可能会很有用:
注意:jQuery不支持
隐藏的偏移量坐标
元素或边界的说明,
边距或主体上的填充物
元件。
, http://www.quirksmode.org/mobile/viewports.html讨论了视口周围的问题,确定视口尺寸以及计算相对于视口坐标系的元素边界。然后,该博客文章的第2部分介绍了移动浏览器中的隐式视口。他没有给出能准确回答您问题的代码,但是它绝对相关,值得一读。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。