通过 JS 判断页面是否有滚动条的实现方法

判断页面是否有滚动条是 web 开发中常见的需求之一。可以通过 JS 判断页面是否有滚动条的实现方法有以下几种：

方法一：通过比较页面高度与窗口高度判断

在 HTML 的文档对象模型（DOM）中，document 对象的 scrollHeight 属性表示网页正文部分的高度。比较这个高度和窗口的高度，即可判断页面是否有滚动条。

if (document.body.scrollHeight > window.innerHeight) {
  console.log("页面有滚动条");
} else {
  console.log("页面没有滚动条");
}

方法二：通过比较元素高度与容器高度判断

另外一种方式是通过获取元素的高度和其容器的高度，比较它们的大小，若元素高度大于容器高度，便表明该元素区域出现了滚动条。

<div id="container">
  <div id="content">...</div>
</div>

const container = document.getElementById("container");
const content = document.getElementById("content");
if (content.offsetHeight > container.offsetHeight) {
  console.log("容器中有滚动条");
} else {
  console.log("容器中没有滚动条");
}

使用以上两种方式，均可实现通过 JS 判断页面是否有滚动条的需求。