HTML如何判断哪些元素可见？ [英] HTML how to tell which elements are visible?

问题描述

我已经看到了几个解决方案，这些解决方案在滚动页面时确定元素在视口中何时可见，但我还没有看到哪些元素包含在滚动容器 div ，如下例所示。

当他们通过滚动div滚动到视图中时，我将如何检测这些项目？而相比之下，如果他们掉在视线之外，我会如何发现他们。在所有情况下，溢出元素都不会在一开始就隐藏。

HTML

 < div id =mainContainerclass =main> 
< div id =scrollContainerclass =scroller> 
< div id =picturesContainerclass =holder> 
< div id =pictureContainer1class =picture position1> 
 pictureContainer1< / div> 
 
< div id =pictureContainer2class =picture position2> 
 pictureContainer2< / div> 
< div id =pictureContainer3class =picture position3> 
 pictureContainer3< / div> 
< div id =pictureContainer4class =picture position4> 
 pictureContainer4< / div> 
< div id =pictureContainer5class =picture position5> 
 pictureContainer5< / div> 
< div id =pictureContainer6class =picture position6> 
 pictureContainer6< / div> 
< div id =pictureContainer7class =picture position7> 
 pictureContainer7< / div> 
< div id =pictureContainer8class =picture position8> 
 pictureContainer8< / div> 
< div id =pictureContainer9class =picture position9> 
 pictureContainer9< / div> 
< / div> 
 
< / div> 
< / div> 
  

CSS

  .main {
 position：absolute; 
 top：0px; 
 left：0px; 
 height：200px; 
 width：200px; 
 background-color：gray; 
 border：1px纯黑色; 
} 
 
 .scroller {
 position：absolute; 
 top：0px; 
 left：0px; 
 height：250px; 
 width：250px; 
 background-color：lightblue; 
 border：1px纯黑色; 
 overflow：scroll; 
} 
 
 .picture {
 position：absolute; 
 height：200px; 
 width：200px; 
 background-color：lightyellow; 
 border：1px纯黑色; 
} 
 
 .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。 （newState）; 
如果（oldState！= newState）
开关（newState）; newBate（newState）; 
 var newState = testInside（this，box）; 
 inside [this.id] = 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;'>窗口中的图片（数字）：< / div> 
< div id ='picStatus'>< / div> 
  

它是基于对象坐标的代码，女巫在滚动事件中重新计算。有一些事情要知道。 IE和似乎是，Opera考虑了滚动条本身的宽度和高度，这要求窗帘代码调整。我只是提出了解决方案，并没有花太多时间来调试。

然而，也许会有用的（从jquery api关于偏移量）：

注意：jQuery不支持获取
隐藏
元素的偏移坐标或占边界，
页边距，或在body
元素上设置填充。

I have seen several solutions which determine when an element is visible in the viewport whilst scrolling the page, but I haven't seen any which do this for elements that are contained in a scrolling container div as in the example here.

How would I detect the items as they scroll into view via the scrolling div? And by contrast how would I detect them if they fell out of view. In all cases the overflow elements are not hidden at the outset.

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;
    }

解决方案

include jQuery library on page first.

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(', '));
    });
});

Add in HTML for results output:

<div style='margin-top:280px;'>Pictures in window (numbers):</div>
<div id='picStatus'></div>

It is code based on object's coords, witch are recalculated on scroll event. There are some things to know. IE and, seems to be, Opera takes into consideration width and height of scrollbars themselves, that demands curtain code tuning. I just have suggested solution direction and did not spent much time for debugging this.

And yet, maybe will be useful following (from jquery api about offset):

Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.

这篇关于HTML如何判断哪些元素可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！