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不支持获取隐藏元素的偏移坐标，也不支持在body元素上设置边框，边距或填充。

---

http://www.quirksmode.org/mobile/viewports.html讨论视口周围的问题，确定它们的尺寸，并计算相对于视口坐标系的元素边界。 那篇博文的第2部分随后进入移动浏览器的隐式视口。 他没有给出准确回答你的问题的代码，但它绝对相关，值得一读。

链接地址: http://www.djcxy.com/p/7373.html

上一篇: HTML how to tell which elements are visible?

下一篇: SQLiteDatabase.openDatabase vs SQLiteOpenHelper.getReadableDatabase