Question

我已经看到了几个解决方案，这些解决方案确定在滚动页面时视口中的元素何时可见，但我还没有看到任何针对滚动容器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;
    }

Answer 1

首先在页面上包含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关于offset可能会有用：

注意：jQuery不支持获取隐藏的偏移坐标元素或占边界，边缘，或身体上的填充元件。

Answer 2

http://www.quirksmode.org/mobile/viewports.html讨论视口周围的问题，确定它们的尺寸，以及计算相对于视口坐标系的元素边界。然后，该博客文章的第2部分将进入移动浏览器中的隐式视口。他没有提供完全回答你问题的代码，但这绝对是相关的，值得一读。

HTML如何判断哪些元素可见？

2 个答案: