浏览器宽度以及滚动条宽度计算

在获取页面宽度的时候从网上找到如下方法：

getClientWidth() {
  let clientWidth = 0;
  if (document.body.clientWidth && document.documentElement.clientWidth) {
    clientWidth = Math.min(document.body.clientWidth, document.documentElement.clientWidth);
  } else {
    clientWidth = Math.max(document.body.clientWidth, document.documentElement.clientWidth);
  }
  return clientWidth;
},
const pageWidth = window.innerWidth;

然后发现一个很神奇的事情，为什么在不同电脑上看到的宽度都变了，在浏览器1280px的时候pageWidth一个是1265px，一个是1263px，极其奇怪，于是开始找原因。

然后看到一个计算浏览器滚动条的文章，恍然大悟，原来上面那段代码是获取的不包含滚动条宽度的网页内容的宽度！

包含滚动条的宽度应该是：

const pageWidth = window.innerWidth;

在浏览器1280px的时候pageWidth就是1280px！

window.innerWidth 浏览器可用宽度
document.body.clientWidth body的宽度

浏览器滚动条的计算方法是：

const scrollWidth = window.innerWidth - document.body.clientWidth;

另外：
screen.width 屏幕分辨率宽度
document.body.scrollWidth 页面完整宽度
document.body.scrollHeight 页面完整宽度
document.body.offsetWidth 网页可见区域宽度
document.body.offsetHeight 网页可见区域高度

---

更多内容补充：
区别clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop