javascript css检查是否溢出

Question

检测元素是否溢出的简单方法是什么？

我的用例是，我想限制某个内容框的高度为300px。如果内容比这更高，我会将它切掉并溢出。但是如果它溢出了，我想显示一个'更多'按钮，但是如果没有，我不想显示那个按钮。

有没有一种简单的方法来检测溢出，或者是否有更好的方法？谢谢。

Answer 1

会是这样的：http://jsfiddle.net/Skooljester/jWRRA/1/工作？它只是检查内容的高度，并将其与容器的高度进行比较。如果它大于您可以在代码中添加“显示更多”按钮。

更新：添加了在容器顶部创建“显示更多”按钮的代码。

Answer 2

用JS检查孩子的offsetHeight比父母更多..如果是，让父母溢出无论你想scroll/hidden/auto，也display:block上更加格..

Answer 3

您可以检查相对界限到抵消父母。

// 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; 
} 

如果你传递这一个元素，它会告诉你它的边界是否完全是一个容器内，并且将默认为元素的偏移父母如果没有提供明确的容器。它使用

Answer 4

如果你使用的是jQuery，你可以试试一下：让外部div与overflow: hidden和内部div与内容。然后使用.height()函数检查内部div的高度是否大于外部div的高度。我不确定它会起作用，但试试看。

Answer 5

比较element.scrollHeight到element.clientHeight应该做的任务。

Answer 6

你应该考虑的另一个问题是JS不可用性。想想渐进的魅力或优雅的退化。我建议：

• 默认添加“按钮，更”
• 默认
• 隐藏按钮，如果在JS必要的CSS的修改将溢出的规则比较element.scrollHeight后element.clientHeight

Answer 7

如果DOM元素溢出，该函数将返回布尔值：

function isOverflown(element) { 
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; 
} 

元素可能是垂直或水平溢出或两者兼有

Answer 8

这是一个确定元素是否溢出使用带溢出的包装器div的方法：hidden和JQuery height（）来测量包装器和内部内容分区。

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); 
}); 

来源：Frameworks & Extensions on jsfiddle.net

Answer 9

setTimeout(function(){ 
    isOverflowed(element)   
},500) 

function isOverflowed(element){ 
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; 
} 

这是为我工作。谢谢。

Answer 10

这是为我工作的jQuery解决方案。 clientWidth等没有工作。

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(); 
    } 
}); 

希望这有助于

Answer 11

如果您只想显示更多内容的标识符，那么您可以使用纯CSS完成此操作。我为此使用纯滚动阴影。诀窍是使用background-attachment: local;。你的CSS是这样的：

.scrollbox { 
    overflow: auto; 
    width: 200px; 
    max-height: 200px; 
    margin: 50px auto; 

    background: 
    /* Shadow covers */ 
    linear-gradient(white 30%, rgba(255,255,255,0)), 
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, 

    /* Shadows */ 
    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), 
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; 
    background: 
    /* Shadow covers */ 
    linear-gradient(white 30%, rgba(255,255,255,0)), 
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, 

    /* Shadows */ 
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), 
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; 
    background-repeat: no-repeat; 
    background-color: white; 
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; 

    /* Opera doesn't support this in the shorthand */ 
    background-attachment: local, local, scroll, scroll; 
} 

的代码和一个例子，你可以找到关于http://dabblet.com/gist/2462915

并解释你可以在这里找到：http://lea.verou.me/2012/04/background-attachment-local/。