如何检查滚动条是否可见

当页面内容超出视口高度时，浏览器会自动添加滚动条以便用户能够滚动内容，以查看超出视口高度的其余部分。但是，在某些情况下，我们需要动态地检查滚动条是否可见。下面是实现这一过程的完整攻略：

检查body元素是否可滚动

我们可以通过监测body元素的高度和视口高度是否相等，来确定页面是否有滚动条。在视口高度小于等于body元素高度时，就意味着页面是可滚动的。我们可以使用如下的代码块实现这个功能：

function isScrollable() {
  return document.body.scrollHeight > window.innerHeight;
}

当页面的高度超出视口高度时，该函数将返回true，否则返回false。

检查指定元素是否可滚动

我们还可以使用类似的方式来检查指定的元素是否可滚动。如果该元素的内容超出了其高度，那么该元素就是可滚动的。在这种情况下，我们可以使用如下的代码块实现该功能：

function isElementScrollable(element) {
  return element.scrollHeight > element.clientHeight;
}

该函数接受一个元素作为参数，如果该元素的内容超出其高度，则返回true，否则返回false。

使用示例一：

<div id="wrapper" style="height: 100px; overflow: auto;">
  <div style="height: 200px;"></div>
</div>

如果我们需要检查#wrapper元素是否可滚动，则可以使用如下代码：

const wrapperElement = document.getElementById('wrapper');
const isWrapperScrollable = isElementScrollable(wrapperElement);
console.log(isWrapperScrollable); // true

在这个示例中，#wrapper元素的内容高度超过100px，因此该元素是可滚动的，函数会返回true。

使用示例二：

<div id="content" style="height: 200px;"></div>

如果我们需要检查整个页面是否可滚动，则可以使用如下代码：

const isPageScrollable = isScrollable();
console.log(isPageScrollable); // false

在这个示例中，页面的高度未超过视口高度，因此没有滚动条，函数将返回false。