Demo

Question

假设我有一个包含overflow:hidden的包装div，并且里面有一个div，它远远超出可见部分。如何获得内部div的可见高度？

<div id="wrapper" style="overflow: hidden; height:400px;">
    <div id="inner">
        <!--Lots of content in here-->
    </div>
<div>

我尝试获取内部div的高度的每个方法都返回包括隐藏部分的完整高度，即2000px。我希望能够得到只有可见部分的高度，所以在这个例子中是400px。

我知道我可以获得parentNode的高度，但在生产中，内部div可能不是第一个孩子。因此可能有其他div将它们分开，因此#inner的高度将为400 - 无论它与#wrapper之间的元素偏移如何。

Answer 1

作为基本算法，这可以起作用：

var offset = 0;
var node = document.getElementById("inner");
while (node.offsetParent && node.offsetParent.id != "wrapper")
{
    offset += node.offsetTop;
    node = node.offsetParent;
}
var visible = node.offsetHeight - offset;

但是如果你正在做这些事情，也许你已经使用了jQuery，这可能是.height()和.offset()函数的服务：

$("#wrapper").height()-
$("#inner").offset()['top']+
$("#wrapper").offset()['top'];

Answer 2

快速算法，在window.getComputedStyle

的overflow: hidden上查看DOM树

function visibleArea(node){
    var o = {height: node.offsetHeight, width: node.offsetWidth}, // size
        d = {y: (node.offsetTop || 0), x: (node.offsetLeft || 0), node: node.offsetParent}, // position
        css, y, x;
    while( null !== (node = node.parentNode) ){  // loop up through DOM
        css = window.getComputedStyle(node);
        if( css && css.overflow === 'hidden' ){  // if has style && overflow
            y = node.offsetHeight - d.y;         // calculate visible y
            x = node.offsetWidth - d.x;          // and x
            if( node !== d.node ){
                y = y + (node.offsetTop || 0);   // using || 0 in case it doesn't have an offsetParent
                x = x + (node.offsetLeft || 0);
            }
            if( y < o.height ) {
                if( y < 0 ) o.height = 0;
                else o.height = y;
            }
            if( x < o.width ) {
                if( x < 0 ) o.width = 0;
                else o.width = x;
            }
            return o;                            // return (modify if you want to loop up again)
        }
        if( node === d.node ){                   // update offsets
            d.y = d.y + (node.offsetTop || 0);
            d.x = d.x + (node.offsetLeft || 0);
            d.node = node.offsetParent;
        }
    }
    return o;                                    // return if no hidden
}

示例fiddle（查看您的控制台）。

Answer 3

我发现在任何情况下都能找到这种方法的唯一方法，包括溢出时使用transform: translate()，并且元素之间还有其他嵌套容器，隐藏其溢出的元素是将.getBoundingClientRect()与对隐藏元素溢出的祖先的引用结合起来：

function getVisibleDimensions(node, referenceNode) {
    referenceNode = referenceNode || node.parentNode;

    var pos = node.getBoundingClientRect();
    var referencePos = referenceNode.getBoundingClientRect();

    return {
        "width": Math.min(
            node.clientWidth,
            referencePos.left + referenceNode.clientWidth - pos.left, 
            node.clientWidth - (referencePos.left - pos.left)
        ),
        "height": Math.min(
            node.clientHeight, 
            referencePos.top + referenceNode.clientHeight - pos.top,
            node.clientHeight - (referencePos.top - pos.top)
        )
    }
}

Demo

如果未给出参考节点，则假定父节点为：Demo。

请注意，这不会考虑元素在视口中是否可见，只是可见（不会因溢出而隐藏）。如果您需要两者，则可以将功能与this answer结合使用。它也没有visibility: hidden的检查，所以如果你需要，你需要检查节点及其所有祖先的style.visibility属性。

Answer 4

我想在它旁边保留一个兄弟，计算它的scrollTop和溢出元素scrollTop然后从兄弟姐妹scroolTop中减去它可能会起作用

Answer 5

下面的代码计算元素的可见部分。可见部分是指在窗口中可见的部分，但我认为您可以轻松地将其更改为基于任意容器元素的计算。

function computeVisibleHeight ($t) {
        var top = $t.position().top;
        var windowHeight = $(window).height();
        var scrollTop = $(window).scrollTop();
        var height = $t.height();

        if (top < scrollTop && height - scrollTop >= windowHeight) {
            // first case: the top and the bottom of the element is outside of the window
            return windowHeight;
        } else if (top < scrollTop) {
            // second: the top is outside of the viewport but the bottom is visible
            return height - (scrollTop - top);
        } else if (top > scrollTop && top + height < windowHeight) {
            // the whole element is visible
            return height;
        } else {
            // the top is visible but the bottom is outside of the viewport
            return windowHeight - (top - scrollTop);
        }
    }

代码使用的是jquery。

获取div的非溢出部分的高度

5 个答案:

Demo