高さが固定されたdivがあり、overflow:hidden;
div の固定高さを超えてオーバーフローしている要素が div に含まれているかどうかを jQuery で確認したいです。どうすればいいでしょうか?
ベストアンサー1
オーバーフローが発生しているかどうかを確認するために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]);
}
}
半分見える部分をカウントしたくない場合は、少し差をつけて計算することができます。