检测元素是否溢出的最简单方法是什么?
我的用例是,我想限制某个内容框的高度为300px。如果内部内容比这高,我用溢出切断它。但如果它已满,我想显示一个'more'按钮,但如果没有,我不想显示该按钮。
是否有一种简单的方法来检测溢出,或者有更好的方法?
检测元素是否溢出的最简单方法是什么?
我的用例是,我想限制某个内容框的高度为300px。如果内部内容比这高,我用溢出切断它。但如果它已满,我想显示一个'more'按钮,但如果没有,我不想显示该按钮。
是否有一种简单的方法来检测溢出,或者有更好的方法?
当前回答
出于封装原因,我扩展了Element。从微观回答。
/*
* isOverflowing
*
* Checks to see if the element has overflowing content
*
* @returns {}
*/
Element.prototype.isOverflowing = function(){
return this.scrollHeight > this.clientHeight || this.scrollWidth > this.clientWidth;
}
像这样使用它
let elementInQuestion = document.getElementById("id_selector");
if(elementInQuestion.isOverflowing()){
// do something
}
其他回答
jquery的替代答案是使用[0]键来访问原始元素,如:
if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){
使用js检查孩子的offsetHeight是否大于父母..如果是,使父溢出滚动/隐藏/自动你想要的,并在更多div上显示:block ..
您可以检查相对于偏移父函数的边界。
// Position of left edge relative to frame left courtesy
// http://www.quirksmode.org/js/findpos.html
function absleft(el) {
var x = 0;
for (; el; el = el.offsetParent) {
x += el.offsetLeft;
}
return x;
}
// Position of top edge relative to top of frame.
function abstop(el) {
var y = 0;
for (; el; el = el.offsetParent) {
y += el.offsetTop;
}
return y;
}
// True iff el's bounding rectangle includes a non-zero area
// the container's bounding rectangle.
function overflows(el, opt_container) {
var cont = opt_container || el.offsetParent;
var left = absleft(el), right = left + el.offsetWidth,
top = abstop(el), bottom = top + el.offsetHeight;
var cleft = absleft(cont), cright = cleft + cont.offsetWidth,
ctop = abstop(cont), cbottom = ctop + cont.offsetHeight;
return left < cleft || top < ctop
|| right > cright || bottom > cbottom;
}
如果你传递给它一个元素,它会告诉你它的边界是否完全在容器中,如果没有显式提供容器,它将默认为元素的offset父元素。
为条件可见性添加一个事件监听器:
document.getElementById('parent').addEventListener('scroll', (e) => {
const childEl = document.getElementById('child');
childEl.style.visibility = e.target.scrollTop > 0 ? 'visible' : 'hidden';
});
这是对我有用的jQuery解决方案。clientWidth等没有工作。
function is_overflowing(element, extra_width) {
return element.position().left + element.width() + extra_width > element.parent().width();
}
如果这不起作用,请确保元素的父元素具有所需的宽度(就个人而言,我必须使用parent().parent())。位置相对于父节点。我还包含了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();
}
});
希望这能有所帮助。