我有一个高度固定且具有overflow:hidden;
属性的
元素。
我想使用jQuery检查
元素中是否存在溢出到
固定高度之外的元素。我应该如何实现?
我有一个高度固定且具有overflow:hidden;
属性的
我想使用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
但是,如果你想知道你的元素内部的元素是可见还是不可见,那么你需要进行更多的计算。在可见性方面,子元素有三种状态:
如果你想计算半可见的项目,你需要使用以下脚本:
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]);
}
}
如果您不想计算半可见元素,您可以略微调整计算结果。
<p>
是块级元素,它的宽度为100%。如果你想尝试在<p>
内添加不同数量的文本,只需使用p{display:inline}
即可使<p>
变成行内元素,这样<p>
的宽度将由其中的文本决定。 - Mohsen我和楼主有同样的问题,但那些回答都不能满足我的需求。我需要一个简单的条件,来满足我的简单需求。
以下是我的答案:
if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
alert("this element is overflowing !!");
}
else {
alert("this element is not overflowing!!");
}
同时,如果你需要测试两种情况,你可以通过更改scrollHeight
来代替scrollWidth
。
部分参考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');
我使用了 jQuery 库:https://github.com/kevinmarx/overflowing
安装完库后,如果您想将类 overflowing
分配给所有溢出元素,只需运行以下代码:
$('.targetElement').overflowing('.parentElement')
overflowing
,例如 <div class="targetElement overflowing">
。你可以在某些事件处理程序(如点击、鼠标悬停)或其他函数中添加此代码,以使其动态更新。<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')
}
这看起来更容易了...
一种方法是将scrollTop与自身进行比较。给内容一个比其大小更大的滚动值,然后检查它的scrollTop是否为0(如果不为0,则存在溢出)。
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();
}
});
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
}