如何使用 vanilla javascript 确定 <div> 是可滚动的？

Question

这个问题在这里（检测 DIV 是否有滚动条[重复]）和关于 SO 的其他问题的回答不准确。

答案没有考虑到 div 的内容可能有float之后没有被清除。的div.clientHeight和div.scrollHeight不能被用于检测滚动行为。就像下面的例子：

window.addEventListener("load",function(){

  var div = document.querySelector(".container");

  document.querySelector(".clientHeight").innerHTML = div.clientHeight;

  document.querySelector(".scrollHeight").innerHTML = div.scrollHeight;

});

.container{

  width: 50px;

  min-height: 20px;

  border: 1px solid red;

}

.floated{

  float: left;

}

<table>

  <thead>

    <tr>

      <th>clientHeight</th>

      <th>scrollHeight</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td class="clientHeight"></td>

      <td class="scrollHeight"></td>

    </tr>

  </tbody>

</table>

<div class="container">

  <div class="floated">Lorem ipsum dolor sit amet blah blah blah blah blah</div>

</div>

Answer 1

检查父容器是否有overflow-y，overflow-x或者overflow是auto或scroll。用于检查是否水平滚动的javascript：const container = document.getElementByClassName('container');const overflowY = getComputedStyle(div).overflowY;const verticallyScrollable = overflowY === "auto" || overflowY === "scroll";