如何用纯JavaScript获取不含滚动条的视口尺寸

1 优先推荐原生API获取可用视口尺寸 #

你之前误用了document.body.clientWidth，正确的做法是获取根HTML元素的clientWidth属性，该属性属于CSSOM规范标准，返回值已自动扣除垂直滚动条宽度，对应clientHeight扣除水平滚动条高度：

// 兼容IE9及以上所有主流浏览器
const getAvailableViewport = () => {
  const root = document.documentElement
  return {
    width: root.clientWidth,
    height: root.clientHeight
  }
}

该属性完全符合最新浏览器特性与规范，不需要额外做兼容处理。

2 兜底方案：手动计算滚动条宽度 #

如果需要单独获取滚动条宽度做自定义逻辑计算，可以使用兼容到IE6的动态元素计算方案：

const getScrollbarWidth = () => {
  // 创建带滚动条的临时外层元素
  const outer = document.createElement('div')
  outer.style.cssText = `
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
    visibility: hidden;
  `
  document.body.appendChild(outer)
  // 创建内层100%宽的元素
  const inner = document.createElement('div')
  inner.style.width = '100%'
  outer.appendChild(inner)
  // 差值即为滚动条宽度
  const width = outer.offsetWidth - inner.offsetWidth
  outer.remove()
  // 计算结果可缓存，仅当用户修改系统滚动条设置时才会变动
  return width
}

3 无JS的CSS原生解决方案（性能最优） #

90%以上的居中、靠边布局场景不需要用JS计算尺寸，CSS原生布局规则默认基于滚动条内侧的可用视口计算：

• 元素居中：直接使用margin: 0 auto或者父层display: flex; justify-content: center，不会出现滚动条导致的偏移问题
• 右边界放置按钮：使用position: fixed的right属性设置偏移，值的参考系为可用视口右边界，不会被滚动条覆盖

/* 居中容器示例 */
.center-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 右侧固定按钮示例 */
.right-fixed-btn {
  position: fixed;
  right: 16px;
  top: 40%;
  z-index: 999;
}

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