我看到了这个问题,但感觉一定有一种更“清晰”的jQuery方法来解决它。我甚至不确定这是否适用于所有情况。是否有一种方法可以让jQuery确定容器是否存在溢出,而无需比较尺寸?
为了澄清,是否有一种方法可以测试CSS属性
为了澄清,是否有一种方法可以测试CSS属性
overflow: hidden
是否已启动并隐藏内容?$.fn.hasOverflow = function() {
var $this = $(this);
var $children = $this.find('*');
var len = $children.length;
if (len) {
var maxWidth = 0;
var maxHeight = 0
$children.map(function(){
maxWidth = Math.max(maxWidth, $(this).outerWidth(true));
maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
});
return maxWidth > $this.width() || maxHeight > $this.height();
}
return false;
};
示例:
var $content = $('#content').children().wrapAll('<div>');
while($content.hasOverflow()){
var size = parseFloat($content.css('font-size'), 10);
size -= 1;
$content.css('font-size', size + 'px');
}
$.fn.hasOverflow = function() {
$(this).css({ overflow: "auto", display: "table" });
var h1 = $(this).outerHeight();
$(this).css({ overflow: "hidden", display: "block" });
var h2 = $(this).outerHeight();
return (h1 > h2) ? true : false;
};
return (h1 > h2) ? true : false;
这段代码有些重复了, return h1 > h2;
就足够了 ;) - Shikiryu没有干净的方法。你可以做两个包装器,外部包装器具有 overflow: hidden
,并比较两个包装器的尺寸,但任何你可能做的事情最终都会成为 hacky。如果这个功能确实是必要的,那么你就不得不接受这些 hack。
width
检查。在接受之前,我会让它运行一段时间,看看是否有任何实际解决方案。 - Jason还有另一种解决方案(此示例测试高度是否溢出),它要求溢出的容器为position:relative
:
<div id="overflowing-container" style="position:relative">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
var last = $('.children:last'), container=$('#overflowing-container')
lastOffsetHeight = container.scrollTop() + last.outerHeight(true) + last.position().top;
if (last[0] && lastOffsetHeight > container[0].getBoundingClientRect().height) {
console.log("thisContainerOverflows")
}
parent()
的scrollWidth
:var totalWidth = $(this).parent()[0].scrollWidth;
0
索引是指父级的“根节点”,从那里获取其属性。