为何出现滚动条时clientWidth与offsetWidth值仍相同？

我之前也踩过这个坑！大概率是你忽略了一个关键点：你选中的.main-container元素本身并没有自己的滚动条，页面的滚动条其实属于它的父元素（比如body或者html标签），所以它的offsetWidth和clientWidth自然会相等。

常见原因分析 #

• 目标元素无独立滚动条：如果.main-container没有设置overflow: auto或overflow: scroll，同时内容没有溢出它的容器，那它不会生成自己的滚动条。页面的滚动条实际属于根元素（html/body），此时你测这个div的两个宽度值肯定是一样的。
• 内容未触发滚动条：就算给元素加了overflow: auto，如果元素内容高度没有超过它的设定高度，滚动条不会显示，两个宽度值也不会有差值。

正确的解决方案 #

方案1：测量页面根元素的滚动条宽度

页面的滚动条通常属于document.documentElement（根html元素），直接测它的差值即可：

$(".searchEvents").click(function(){
  const rootElement = document.documentElement;
  const scrollbarWidth = rootElement.offsetWidth - rootElement.clientWidth;
  alert(`滚动条宽度：${scrollbarWidth}px`);
});

方案2：确保目标元素有自己的滚动条

如果你确实需要测量.main-container的滚动条，先给它添加触发滚动条的条件：

1. 给容器加CSS，让它能生成滚动条：

.main-container {
  overflow: auto; /* 内容溢出时显示滚动条 */
  height: 300px; /* 设置固定高度，让内容能溢出 */
}

2. 确保容器内的内容高度超过设定的height值，此时再运行你的代码，就能得到正确的滚动条宽度差值了。

额外排查步骤 #

1. 打开浏览器开发者工具，选中.main-container，查看Computed面板里的overflow属性，确认是否为auto/scroll；
2. 检查元素的内容高度是否真的超过了容器高度，没有溢出就不会出现滚动条；
3. 如果元素有边框，offsetWidth会包含边框宽度，clientWidth不含，但这时候的差值是边框宽度，不是滚动条宽度，注意区分。

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