Question

如果它溢出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. ->

Answer 1

添加内包装。

<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高度，你就得到答案了。

Answer 2

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)只是一个正常的数组方法，它删除字符串的最后两个字符。（因为字符串只是一个数组的字符，这是有效的）

所有这一切前面的+符号是自动将值转换为整数而不是将其保留为字符串。

JS检查内容是否溢出了verticaly

2 个答案: