Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
浏览器宽度以及滚动条宽度计算公式_HTML+CSS网页设计与制作,希望能够帮助你!!!。

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

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

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。