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

这个问题在这里(检测 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>


Cats萌萌
浏览 113回答 1
1回答

MYYA

检查父容器是否有overflow-y,overflow-x或者overflow是auto或scroll。用于检查是否水平滚动的javascript:const container = document.getElementByClassName('container');const overflowY = getComputedStyle(div).overflowY;const verticallyScrollable = overflowY === "auto" || overflowY === "scroll";
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript