检测元素是否溢出的最简单方法是什么?
我的用例是，我想限制某个内容框的高度为300px。如果内部内容比这高，我用溢出切断它。但如果它已满，我想显示一个'more'按钮，但如果没有，我不想显示该按钮。
是否有一种简单的方法来检测溢出，或者有更好的方法?
当前回答
setTimeout(function(){
isOverflowed(element)
},500)
function isOverflowed(element){
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
这对我来说很管用。谢谢你！
其他回答
使用js检查孩子的offsetHeight是否大于父母..如果是，使父溢出滚动/隐藏/自动你想要的，并在更多div上显示:block ..
比较元素。scrollHeight到元素。clientHeight应该做这个任务。
下面是来自MDN解释Element的图片。scrollHeight和Element.clientHeight。
你应该考虑的另一个问题是JS不可用。考虑渐进增强或优雅降级。我建议:
默认添加“更多按钮” 默认添加溢出规则 隐藏按钮，并在JS中进行CSS修改后比较元素。scrollHeight到element.clientHeight
下面是一个使用带有overflow:hidden和JQuery height()的包装器div来确定元素是否已溢出的方法，以测量包装器和内部内容div之间的差异。
outers.each(function () {
var inner_h = $(this).find('.inner').height();
console.log(inner_h);
var outer_h = $(this).height();
console.log(outer_h);
var overflowed = (inner_h > outer_h) ? true : false;
console.log("overflowed = ", overflowed);
});
来源:jsfiddle.net上的框架和扩展
为条件可见性添加一个事件监听器:
document.getElementById('parent').addEventListener('scroll', (e) => {
const childEl = document.getElementById('child');
childEl.style.visibility = e.target.scrollTop > 0 ? 'visible' : 'hidden';
});
