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/。