使用jquery检查div是否有溢出元素
使用jquery检查div是否有溢出元素
提问于 2011-10-06 06:46:02
我有一个具有固定高度和overflow:hidden;的div
我想检查一下jQuery是否有溢出超过固定高度的元素。我该怎么做呢？
回答 9
Stack Overflow用户
回答已采纳
发布于 2011-10-06 06:53:58
您实际上不需要任何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
但是，如果您想知道元素中的哪个元素可见或不可见，那么您需要做更多的计算。就可见性而言，子元素有三种状态：
如果您想计算半可见项，则需要以下脚本：
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]);
}
}如果你不想计算半可见的，你可以用一点差异来计算。
Stack Overflow用户
发布于 2014-06-20 18:01:18
我和OP也有同样的问题，但这些答案都不符合我的需求。我需要一个简单的条件，一个简单的需求。
这是我的答案：
if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
alert("this element is overflowing !!");
}
else {
alert("this element is not overflowing!!");
}此外，如果您需要测试这两种情况，也可以通过scrollHeight更改scrollWidth。
Stack Overflow用户
发布于 2013-06-28 05:37:49
部分基于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');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7668636
复制相关文章
相似问题