JS 判断页面滚动条及计算宽度的简洁实现

前言与背景

前言

近期在开发插件时，遇到了通过 JS 检测页面是否包含滚动条的需求。经查阅相关资料，发现现有方案大多较为繁琐且代码冗长。经过对比多种实现方式，最终整理出一套更为简洁的检测方案。此外，在判断滚动条存在性的同时，计算滚动条的具体宽度也是提升体验的关键，本文将一并介绍相关实现方法。

判断滚动条的必要性

为什么需要判断滚动条

在弹窗类插件的开发场景中，判断滚动条的存在性尤为常见。大多数弹窗组件在显示时会设置 overflow: hidden 属性以隐藏背景滚动条。然而，若页面内容较长，添加该属性后，由于滚动条消失导致页面可用宽度变化，极易引发页面内容的水平晃动，影响视觉效果。

为了优化用户体验，可以通过 JS 检测页面是否存在滚动条，并据此动态添加 margin-left 属性。这一操作旨在抵消因设置 overflow: hidden 而导致的滚动条占位空间变化，从而保持页面布局的稳定。

滚动条存在性的检测方法

滚动条存在性的检测方法

实际上，仅需一行 JavaScript 代码即可完成检测，且该方法在 IE7 浏览器中测试兼容。

function hasScrollbar() {
  return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}

通常情况下，通过比较 document.body.scrollHeight 与 window.innerHeight  的大小关系即可判断页面是否超出可视区域，从而确定是否存在滚动条。

然而，在 IE7 和 IE8 浏览器中，window.innerHeight  的值可能为 underfined，导致直接比较失效。因此，为了兼容 IE7 和 IE8 浏览器，需要改用 document.documentElement.clientHeight  属性来获取窗口高度并进行计算。

滚动条宽度的计算方案

滚动条宽度的计算方法

继续以弹窗场景为例，IE 10 及以上版本以及主流移动端浏览器的滚动条通常采用透明样式，不占据页面实际宽度（注：IE 10 以上可通过 CSS 属性还原原始滚动条样式）。为了进一步提升用户体验，我们需要精确计算滚动条的宽度，并根据计算结果合理设置 margin-left 的数值，以填补因隐藏滚动条而产生的空白。

计算滚动条宽度的思路相对直观：创建一个包含滚动条的 div 元素，通过计算该元素的 offsetWidth 与 clientWidth 之间的差值，即可得出滚动条的宽度。此方法借鉴自 Magnific-popup 插件的实现逻辑。

function getScrollbarWidth() {

  var scrollDiv = document.createElement("div");
  scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
  document.body.appendChild(scrollDiv);
  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  document.body.removeChild(scrollDiv);

  return scrollbarWidth;

}

总结与最佳实践

总结

使用 JS 实现特定功能并非难事，但作为开发者，应始终追求更简单、更优雅的代码实现方式，并将提升用户体验作为核心原则。在条件判断逻辑上，有时复杂的十行逻辑可简化为一行代码。此外，应善于利用三元表达式替代传统的 if..else 结构，以进一步精简代码体积。

其核心原理在于判断文档的总高度是否大于可视区域的高度。