如何获取水平滚动条高度？原clientHeight差值法已失效

我之前也踩过这个坑，尤其是在OSX系统上，默认的滚动条是自动隐藏且不占用布局空间的，导致常规的offsetHeight - clientHeight差值方法直接失效。下面给你分享几个可行的解决思路，其中最可靠的是通过临时测试元素来获取：

核心解决方案：创建临时测试容器 #

通过动态生成一个强制显示水平滚动条的临时元素，我们可以准确计算出滚动条的实际高度，不受系统默认滚动条样式影响：

function getHorizontalScrollbarHeight() {
  // 创建临时容器，确保不会干扰页面布局
  const testContainer = document.createElement('div');
  testContainer.style.cssText = `
    width: 100px;
    height: 100px;
    overflow-x: scroll;
    position: absolute;
    top: -9999px;
    left: -9999px;
    visibility: hidden;
    margin: 0;
    padding: 0;
    border: none;
  `;

  // 创建超宽内容，强制触发水平滚动条
  const testContent = document.createElement('div');
  testContent.style.width = '200px';
  testContent.style.height = '100%';
  testContainer.appendChild(testContent);

  document.body.appendChild(testContainer);
  // 计算滚动条高度：容器整体高度减去内容可视高度
  const scrollbarHeight = testContainer.offsetHeight - testContainer.clientHeight;
  // 清理临时元素
  document.body.removeChild(testContainer);

  return scrollbarHeight;
}

// 使用示例
console.log("当前水平滚动条高度：", getHorizontalScrollbarHeight());

方案说明 #

• 临时元素被移出视口且设为隐藏，完全不会影响页面的布局和视觉表现
• 通过overflow-x: scroll和超宽内容，强制让水平滚动条显示，哪怕在OSX这类默认隐藏滚动条的系统上
• 计算出的差值就是滚动条的真实高度，适配所有主流浏览器和操作系统

针对你的现有代码的补充提示 #

如果你想直接在你的#wrapper元素上获取，需要满足两个前提：

1. #content的宽度必须超过#wrapper的宽度
2. #wrapper设置了overflow-x: auto或scroll

如果OSX下还是出现offsetHeight和clientHeight无差异的情况，直接用上面的临时元素方法获取系统标准滚动条高度即可。

内容的提问来源于stack exchange，提问作者sanjihan