得到不可见的内部div

Question

我有一个div(parentDivStyle),其位置absolute是我的父div.然后我在父div的位置内有5个子(childDivStyle)div relative.我已将overflow隐藏的父div 设置为隐藏.因此,一些儿童div不可见.我想得到jquery看不到的div.有什么办法吗？

我用google搜索了大部分与"可见"属性相关的结果,这不是我想要的.而且我也不喜欢任何插件.请帮忙.

CSS

.parentDivStyle {
    overflow:hidden;
    width:300px;
    height:50px;
    position:absolute;
    background:#ccc;
    float:left;
}
.childDivStyle {
    width:100px;
    height:50px;
    position:relative;
    float:left;
    background:red;
    border: 1px solid black;
}

HTML

<div class="parentDivStyle">
<div class="childDivStyle">1</div>
<div class="childDivStyle">2</div>
<div class="childDivStyle">3</div>
<div class="childDivStyle">4</div>
<div class="childDivStyle">5</div>
</div>

的jsfiddle

Answer 1

使用有关获取元素坐标的答案，您可以找出元素之间的相对位置。一旦知道了可见区域的坐标，您就可以轻松找出哪些子元素是可见的。

这将告诉您元素是否可见，如果不可见，则它们相对于容器的方向。

displayCoords = function(element) {
    var rect = element.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);   

    var childElements = element.children;
    for(i = 0; i < childElements.length; i++)
    {
        childRect = childElements[i].getBoundingClientRect();
        console.log(childRect.top, childRect.right, childRect.bottom, childRect.left);  
        if(childRect.top >=  rect.bottom)
            console.log("not visible -- off the bottom of element");
        else if(childRect.left >= rect.right)
            console.log("not visible -- off the right of element");
        else if(childRect.bottom <= rect.top)
            console.log("not visible -- off the top of element");
        else if(childRect.right <= rect.left)
            console.log("not visible -- off the left of element");
    }

}

我在这里分叉了你的 JSFiddle