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部分介绍了移动浏览器中的隐式视口。他没有给出能准确回答您问题的代码，但是它绝对相关，值得一读。