检查是否有页面有滚动条 x js

在编写前端代码时，我们可能需要检查当前页面是否存在水平或垂直方向的滚动条，以此来采取相应的措施。在本文中，将介绍如何通过 JavaScript 检查页面是否存在滚动条。

检查水平滚动条

要检查页面是否存在水平滚动条，我们可以通过以下代码进行：

if (document.documentElement.scrollWidth > document.documentElement.clientWidth) {
  // 存在水平滚动条
} else {
  // 不存在水平滚动条
}

这里使用了 document.documentElement.scrollWidth 表示页面的完整宽度，而 document.documentElement.clientWidth 则表示页面的可视宽度。如果两者不相等，则说明页面存在水平滚动条。

检查垂直滚动条

要检查页面是否存在垂直滚动条，我们可以通过以下代码进行：

if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
  // 存在垂直滚动条
} else {
  // 不存在垂直滚动条
}

这里使用了 document.documentElement.scrollHeight 表示页面的完整高度，而 document.documentElement.clientHeight 则表示页面的可视高度。如果两者不相等，则说明页面存在垂直滚动条。

检查同时存在水平和垂直滚动条

要检查页面是否同时存在水平和垂直滚动条，我们可以将以上两种方式结合进行，如下所示：

if (document.documentElement.scrollWidth > document.documentElement.clientWidth || document.documentElement.scrollHeight > document.documentElement.clientHeight) {
  // 存在水平或垂直滚动条
} else {
  // 不存在水平或垂直滚动条
}

这里将判断条件改为当存在水平或垂直滚动条时，则说明页面存在滚动条。

以上就是本文介绍的如何通过 JavaScript 检查页面是否存在水平或垂直滚动条的方法。