JS檢查內容溢出verticaly

需要做出如此做，如果它溢出Verticaly。帶領我走向正確的方向。JS檢查內容溢出verticaly

〔實施例：

.contents { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
}

<div class="contents"> 
 
CONTENT CCC<br> 
 
CONTENT CCC<br> 
 
CONTENT CCC<br> 
 
CONTENT CCC<br> 
 
CONTENT CCC<br> 
 
CONTENT CCC<br> 
 
CONTENT CCC<br> 
 
CONTENT CCC<br> 
 
<div> 
 

 

 
<!-- This would result to do an action. ->

來源

2017-04-17 T.Lowly

[This question]（http://stackoverflow.com/questions/6853293/how-do-i-get-the-height-of-a-divs-full-content-with-jquery）可能會有所幫助。 – Draco18s

@MikeMcCaughan檢查了它，它決定了水平不垂直的溢出。 –

@ Draco18s它確實有幫助。謝謝。 –

https://jsfiddle.net/qq3w1k3a/

如果高度是通過CSS設置，您就可以在對scrollHeight造型指定的高度。 a.e以下將根據提供的元素的滾動高度是否大於指定的大小，提示true或false。

function check_height(ele) { 
    let styleHeight = +getComputedStyle(ele).getPropertyValue('height').slice(0,-2); 
    alert(ele.scrollHeight > styleHeight); 
}

編輯：細說這個+getComputedStyle(ele).getPropertyValue('height').slice(0,-2);

getComputedStyle(ele)是一個窗口方法，將，顧名思義，搶指定元素的所有樣式。返回的對象有一個名爲getPropertyValue的方法，允許您指定要抓取的屬性（在此例中爲height）。

.slice(0, -2)只是一個正常的數組方法，它刪除字符串的最後兩個字符。（因爲字符串是隻是一個字符陣列這個作品）

在所有的它前面的+符號是自動的值轉換爲整數，而不是保持它作爲一個字符串的。

來源

2017-04-17 17:20:55 zfrisch

是的，它的工作，它幾乎有點像添加另一個Div和比較它，就像@geuis寫道。但這種方法更快捷，現在要去分析的東西哈哈，謝謝:) 編輯：好吧，我明白了它的方法，我只是不熟悉Js的一些功能，但有點新鮮。謝謝你的探索！ –

當然@Towow--我在一篇文章中寫了一篇關於這個以及其他概念的解釋。 https://medium.com/wdstack/27-everyday-javascript-tricks-for-beginner-web-developers-2c04d572dde - 隨時檢查出來！ – zfrisch

謝謝，我將定義閱讀它槽:) –

添加的內包裝。

<div class="contents"> 
    <div class="inner"> 
    CONTENT CCC<br> 
    CONTENT CCC<br> 
    CONTENT CCC<br> 
    CONTENT CCC<br> 
    CONTENT CCC<br> 
    CONTENT CCC<br> 
    CONTENT CCC<br> 
    CONTENT CCC<br> 
    </div> 
<div>

然後你就可以得到document.querySelector('.inner').outerHeight，如果它比.contents高度時，你有你的答案。

來源

2017-04-17 17:18:53 Geuis

這是一個有效的觀點，儘管我需要阻止它在做其他事情時溢出。但是，謝謝！爲什麼我didint甚至想到嘗試它。 –

JS檢查內容溢出verticaly

回答

相關問題