时间戳

首页 > 解决方案 > 如何确定 DOM 元素是否为滚动容器？

javascript - 如何确定 DOM 元素是否为滚动容器？

问题描述

有没有办法在不检查其样式的情况下找出 DOM 元素是否具有滚动功能？

目前，我正在寻找overflow: auto或scroll在元素上。我想知道一种 JavaScript 方法，它可以检查元素是否是深度嵌套子元素的滚动容器。

[编辑]

这不是要确定它是否显示了滚动条；我想知道它是否是一个容器，如果内容超出容器高度，它会显示滚动条。

根据我的经验，浏览器有时会自然而然地这样做，但我不知道为什么。这告诉我在 JS 中的容器上有一些东西说“当内容更大时我会显示滚动条”。

我在想它可能与height: 100%andposition: absolute有关系，但肯定还有其他情况。

奇怪的是，浏览器将这些元素显示为overflow: visible来自用户代理样式表，但在这种情况下它不应该显示滚动条。

标签： javascriptdomscrollscrollbaroverflow

解决方案

You can compare the clientHeight of the element com the scroll height of it.

I made a function that makes it.

var myDiv = document.querySelector("#my_div_1");
var myDiv2 = document.querySelector("#my_div_2");

console.log("There's scroll in my_div 1 = " + hasScrollY(myDiv));
console.log("There's scroll in my_div 2 = " + hasScrollY(myDiv2));

function hasScrollY(elem) {
  return elem.clientHeight < elem.scrollHeight;
}
#my_div_1 {
  background-color: lightblue;
  height: 50px;
  overflow-y: scroll;
}

#my_div_2 {
  background-color: lightgreen;
  height: 60px;
  overflow-y: scroll;
}

p {
  height: 20px;
}
<div id="my_div_1">
  <p>
    This is a div with overflow
  </p>
</div>
<br>
<div id="my_div_2">
  <p>
    This is a div without overflow
  </p>
</div>

推荐阅读