如何检测操作系统（OS）层面用户设置的scrollBar是否为隐藏状态？

是否存在可行方案，能够检测用户是否在操作系统层面强制隐藏了滚动条？以Mac系统为例，系统提供了三种控制滚动条可见性的选项：

1. 跟随鼠标或触控板自动调整显示状态
2. 始终显示
3. 滚动时才显示

原本的需求是在滚动条可见时调整HTML元素的宽度，这部分逻辑可以通过获取目标元素的实际高度轻松实现。但如果用户将滚动条设置为始终隐藏，这套适配逻辑就会失效，有没有方法可以准确识别这类系统设置？

实现方案 #

目前浏览器没有直接暴露系统滚动条设置的原生API，但可以通过差值比对的方式，准确判断当前滚动条是否会挤占页面布局宽度，完全适配Mac系统的三种设置场景：

• 核心检测逻辑：创建临时测试DOM元素，强制触发滚动条出现，对比元素总占位宽度和可视内容宽度的差值
  • 差值大于0：代表当前滚动条会占据布局空间，对应当系统设置为「始终显示滚动条」的场景，这时候按照原逻辑调整元素宽度，预留滚动条的占位空间即可
  • 差值等于0：代表当前滚动条为悬浮覆盖模式，不挤占页面布局空间，对应当系统设置为自动隐藏、滚动时才显示的场景，这时候不需要额外调整元素宽度
• 检测代码实现：

function detectScrollbarMode() {
  const testEl = document.createElement('div')
  // 强制开启滚动条
  testEl.style.overflow = 'scroll'
  // 移出可视区域，避免影响页面展示
  testEl.style.position = 'absolute'
  testEl.style.left = '-9999px'
  testEl.style.width = '100px'
  testEl.style.height = '100px'
  
  document.body.appendChild(testEl)
  // 计算滚动条实际占据的宽度
  const scrollbarOccupiedWidth = testEl.offsetWidth - testEl.clientWidth
  // 清理临时元素
  document.body.removeChild(testEl)
  
  return {
    isScrollbarTakingLayoutSpace: scrollbarOccupiedWidth > 0,
    measuredScrollbarWidth: scrollbarOccupiedWidth
  }
}

• 注意事项：
  • 这套逻辑跨系统兼容Mac、Windows等不同平台的滚动条设置，不需要单独判断系统类型
  • 当系统开启自动隐藏滚动条时，现代浏览器会自动将滚动条渲染为悬浮样式，不会挤占布局空间，这套检测逻辑可以准确识别该状态，不需要额外修改宽度适配逻辑
  • 检测操作性能开销极低，页面初始化阶段执行一次即可，不需要频繁轮询

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