如何使用 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";