[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする

質問

高さが固定されたdivと overflow:hidden;

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
}

動作例をご覧ください。 フィドル

しかし、もし自分の要素の中のどの要素が見えるか見えないかを知りたいのであれば、もっと計算する必要があります。子要素の可視性については、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]);
    }

}

また、半可視を数えたくない場合は、少しの差で計算することができます。