javascript – 获取不可见的内部div

我有一个div(parentDivStyle),其位置绝对是我的父div.然后我在父div中有5个子(childDivStyle)div,位置相对.我已将溢出设置为隐藏的父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

解决方法

使用 this answer获取元素的坐标,可以找出元素相对于彼此的位置.一旦知道可见区域的坐标,就可以轻松找出可见的子元素.

这将告诉您元素是否可见,如果不可见,它们是否与容器相关.

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 here