divにオーバーフロー要素があるかどうかjqueryで確認してください

高さが固定されたdivがあり、 overflow:hidden;

divに、divの固定の高さを超えてオーバーフローしている要素があるかどうかをjQueryで確認したいと思います。これどうやってするの？

実際には、オーバーフローが発生しているかどうかを確認するためのjQueryは必要ありません。使用してelement.offsetHeight、element.offsetWidth、element.scrollHeightとelement.scrollWidthあなたの要素はそれのサイズよりも大きなコンテンツを持っているかどうかを判別できます。

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}

実際の例を見る：Fiddle

ただし、要素内のどの要素が表示されているかを知りたい場合は、さらに計算を行う必要があります。可視性の観点から、子要素には3つの状態があります。

半表示アイテムをカウントする場合は、次のスクリプトが必要です。

var invisibleItems = [];
for(var i=0; i<element.childElementCount; i++){
  if (element.children[i].offsetTop + element.children[i].offsetHeight >
      element.offsetTop + element.offsetHeight ||
      element.children[i].offsetLeft + element.children[i].offsetWidth >
      element.offsetLeft + element.offsetWidth ){

        invisibleItems.push(element.children[i]);
    }

}

また、半表示をカウントしたくない場合は、わずかな違いで計算できます。

私はOPと同じ質問をしましたが、それらの答えのどれも私のニーズに合いませんでした。単純なニーズのために、単純な条件が必要でした。

これが私の答えです：

if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
  alert("this element is overflowing !!");
}
else {
 alert("this element is not overflowing!!");
}

また、あなたが変更できるscrollWidthことにより、scrollHeightあなたはどちらの場合をテストする必要がある場合。

だから私はオーバーフローjqueryライブラリを使用しました：https：//github.com/kevinmarx/overflowing

ライブラリをインストールした後、overflowingすべてのオーバーフロー要素にクラスを割り当てる場合は、次のコマンドを実行するだけです。

$('.targetElement').overflowing('.parentElement')

これによりoverflowing、<div class="targetElement overflowing">オーバーフローしているすべての要素と同様に、クラスが提供され ます。次に、これをいくつかのイベントハンドラー（クリック、マウスオーバー）または上記のコードを実行する他の関数に追加して、動的に更新できるようにします。

Mohsenの回答に部分的に基づいています（追加された最初の条件は、子が親の前に隠されているケースをカバーしています）：

jQuery.fn.isChildOverflowing = function (child) {
  var p = jQuery(this).get(0);
  var el = jQuery(child).get(0);
  return (el.offsetTop < p.offsetTop || el.offsetLeft < p.offsetLeft) ||
    (el.offsetTop + el.offsetHeight > p.offsetTop + p.offsetHeight || el.offsetLeft + el.offsetWidth > p.offsetLeft + p.offsetWidth);
};

次に、ちょうど行います：

jQuery('#parent').isChildOverflowing('#child');

1つの方法は、scrollTopをそれ自体に対してチェックすることです。コンテンツにそのサイズより大きなスクロール値を指定し、scrollTopが0かどうかを確認します（0でない場合はオーバーフローします）。

http://jsfiddle.net/ukvBf/

わかりやすい英語で：親要素を取得します。高さを確認し、その値を保存します。次に、すべての子要素をループして、それぞれの高さを確認します。

これは汚いですが、あなたは基本的な考えを得るかもしれません：http : //jsfiddle.net/VgDgz/

以下は純粋なjQueryソリューションですが、やや面倒です。

var div_height = $(this).height();
var vertical_div_top_position = $(this).offset().top;
var lastchild_height = $(this).children('p:last-child').height();
var vertical_lastchild_top_position = $(this).children('p:last-child').offset().top;
var vertical_lastchild_bottom_position = lastchild_height + vertical_lastchild_top_position;
var real_height = vertical_lastchild_bottom_position - vertical_div_top_position;

if (real_height > div_height){
    //overflow div
}

これは私のために働いたjQueryソリューションです。offsetWidthなどは機能しませんでした。

function is_overflowing(element, extra_width) {
    return element.position().left + element.width() + extra_width > element.parent().width();
}

これが機能しない場合は、要素の親が適切な幅であることを確認してください（個人的には、parent().parent())。positionは親を基準にして使用する必要がありました。extra_width要素（ "タグ"）には少し時間がかかる画像が含まれているため、これも含めました。ロードしますが、関数呼び出し中は幅がゼロになり、計算が損なわれます。これを回避するには、次の呼び出しコードを使用します。

var extra_width = 0;
$(".tag:visible").each(function() {
    if (!$(this).find("img:visible").width()) {
        // tag image might not be visible at this point,
        // so we add its future width to the overflow calculation
        // the goal is to hide tags that do not fit one line
        extra_width += 28;
    }
    if (is_overflowing($(this), extra_width)) {
        $(this).hide();
    }
});

お役に立てれば。

オーバーフローするdivに別のdivを追加して、これを修正しました。次に、2つのdivの高さを比較します。

<div class="AAAA overflow-hidden" style="height: 20px;" >
    <div class="BBBB" >
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

そしてjs

    if ($('.AAAA').height() < $('.BBBB').height()) {
        console.log('we have overflow')
    } else {
        console.log('NO overflow')
    }

これは簡単に見えます...