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

近期在编写插件时，遇到了一个关于判断页面是否有滚动条的问题。经过一番搜索和实践，我发现了一种简洁的方法来解决这个问题。

前言

在插件开发中，尤其是涉及弹窗类插件时，我们经常需要判断页面是否有滚动条。这是因为弹窗通常会设置 `overflow: hidden` 属性，当页面内容超过视口高度时，如果没有滚动条，页面会出现抖动，影响用户体验。为了解决这个问题，我们需要判断是否存在滚动条，并据此进行样式调整。

为什么要判断滚动条的存在性？

弹窗插件在处理长页面时，若直接设置 `overflow: hidden`，会导致页面晃动。通过判断滚动条的存在与否，我们可以根据实际情况添加 `margin-left` 属性，来抵消滚动条位置的影响，从而提升用户体验。

判断滚动条存在的方法

其实只需一行 JS 代码即可实现，并且兼容 IE7 及更高版本：

function hasScrollbar() {

return document.body.scrollHeight > (windownerHeight || document.documentElement.clientHeight);

}

通过比较文档的总高度（`document.body.scrollHeight`）与视口高度（`windownerHeight` 或 `document.documentElement.clientHeight`），可以简单判断页面是否有滚动条。

计算滚动条宽度的方法

对于弹窗设计而言，不仅要判断滚动条的存在，有时还需要知道滚动条的宽度以便更精确地调整样式。在 IE 10 及以上版本以及移动端浏览器中，滚动条通常不占据页面宽度。为了获取滚动条的宽度，我们可以采用以下方法：

function getScrollbarWidth() {

var scrollDiv = document.createElement("div");

scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; left: -9999px;'; // 设置样式使div脱离文档流并显示滚动条

document.body.appendChild(scrollDiv);

var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; // 计算滚动条的宽度

document.body.removeChild(scrollDiv); // 移除创建的div元素

return scrollbarWidth; // 返回滚动条的宽度值

}通过创建一个带有滚动条的临时div元素，并比较其包含滚动条和不含滚动条时的宽度差，即可得到滚动条的宽度。这种方法借鉴了Magnific-popup中的实现方式。

结语

使用JS实现功能的我们也需要思考如何以更简单、更优雅的方式完成这个任务。在条件判断中，有时候一行代码就能完成原本需要复杂逻辑或多行代码才能实现的功能。要注意提升用户体验，根据实际情况调整样式和布局。判断滚动条存在与否并计算其宽度的原理就是比较文档高度与视口高度的差异。希望通过这篇文章能给大家带来启发和帮助。