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

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

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

浏览器宽度以及滚动条宽度计算相关推荐

css滚动条占了宽度,css – 计算定位元素时的滚动条宽度
我有一个最大宽度的布局,当屏幕宽度大于最大值时,它是水平居中的.布局包括一个固定的标题&菜单;当屏幕宽度小于最大值时,菜单的左侧位置为0,并且当屏幕宽度超过最大值时,菜单的左侧位置需要与布局的 ...
JavaScript计算页面滚动条宽度
//右侧滚动条宽度计算 var vs_w = document.offsetWidth - document.clientWidth;//底部滚动条高度计算 var hs_h = document.o ...
JS计算字符串在浏览器中显示的宽度
js计算字符串宽度大家可能会碰到这样一个需求:一个容器的宽度固定,当内容的宽度超过容器的宽度时鼠标移入显示提示框,不超过时则不显示. 这个时候就需要知道内容到底多宽. 怎么计算宽度一 .估计法假 ...
获取浏览器原生滚动条宽度的方法
2019独角兽企业重金招聘Python工程师标准>>> 整体思路就是往body中插入一个div,div中再嵌套一个div,设置外部的div的overflower为scroll, 这样 ...
【原创】告别恼人的水平滚动条——滚动条宽度到底是多少？
相信不管是web前端还是后台的程序员,都讨厌网页水平方向出现滚动条.而要避免出现水平滚动条,计算宽度是必不可少的.而在设计过程中,设计师一般避免计算这个右侧滚动条的宽度.为了避免出现水平滚动条,而将宽 ...
滚动条宽度到底是多少？
相信不管是web前端还是后台的程序员,都讨厌网页水平方向出现滚动条.而要避免出现水平滚动条,计算宽度是必不可少的.而在设计过程中,设计师一般避免计算这个右侧滚动条的宽度.为了避免出现水平滚动条,而将宽 ...
获取滚动条宽度(Element-UI之三)
获取滚动条宽度(Element-UI之三) 代码如下 /*** 计算浏览器滚动条宽度* @returns {Number}*/ export default function () {const ou ...
函数语法：JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转载）...
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
js 如何获取浏览器的高度和宽度
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

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

浏览器宽度以及滚动条宽度计算相关推荐

最新文章

热门文章