10

ラッパーdivがあり、overflow:hiddenその中に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が存在する可能性があるため、の高さは#inner400になります-それとの間の要素のオフセットが何であれ#wrapper。

4

5 に答える 5

6

基本的なアルゴリズムとして、これは機能する可能性があります。

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を使用している可能性があります。これは、jQueryとその機能で役立つ可能性が.height()あります。.offset()

$("#wrapper").height()-
$("#inner").offset()['top']+
$("#wrapper").offset()['top'];
于 2012-10-12T23:23:11.840 に答える
3

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
}

フィドルの例（コンソールを見てください）。

于 2012-10-13T00:41:46.273 に答える
1

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

デモ。

参照ノードが指定されていない場合、親ノードは次のように想定されます：デモ。

これは、要素がビューポートで表示可能かどうかを考慮せず、表示されるだけであることに注意してください（オーバーフローのために非表示にはなりません）。両方が必要な場合は、機能をこの回答と組み合わせることができます。また、のチェックがないため、必要に応じて、ノードとそのすべての祖先のプロパティvisibility: hiddenをチェックする必要があります。style.visibility

于 2017-07-18T23:53:14.990 に答える
-1

その隣に兄弟を保持し、そのscrollTopとオーバーフロー要素scrollTopを計算してから、兄弟scroolTopからそれを差し引くとうまくいくと思います

于 2012-10-12T23:12:11.883 に答える
-1

以下のコードは、要素の表示部分を計算します。表示部分とは、ウィンドウに表示される部分を意味しますが、任意のコンテナ要素に基づいて計算するように簡単に変更できると思います。

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を使用しています。

于 2013-03-27T14:00:55.100 に答える