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

回答

相关问题