javascript - 获取div未溢出部分的高度

Question

假设我有一个包装器 div，overflow:hidden上面有一个 div，里面有一个 div，它远远低于可见部分。如何获得内部 div 的可见高度？

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

我尝试获取内部 div 高度的每种方法都会返回包括隐藏部分在内的完整高度，即 2000 像素。我希望能够仅获得可见部分的高度，因此在本例中为 400px。

我知道我可以得到的高度parentNode，但在生产中，内部 div 可能不是第一个孩子。所以可能有其他 div 将它们分开，因此的高度#inner将为 400 - 无论它和#wrapper.

score 6 · Accepted Answer

作为基本算法，这可以工作：

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'];

score 3 · Accepted Answer

在 DOM 树上查找的快速window.getComputedStyle算法overflow: hidden

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
}

例如小提琴（看看你的控制台）。

score 1 · Accepted Answer

我发现在每种情况下都这样做的唯一方法，包括当有溢出时，transform: translate()使用 s，并且在元素和隐藏其溢出的元素之间还有其他嵌套容器是结合.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。

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

score -1 · Accepted Answer

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

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。

score -1 · Accepted Answer

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

javascript - 获取div未溢出部分的高度

5 回答 5

演示。

Related

Reference