问题描述

不同浏览器的滚动条宽度不相同，需要动态获取浏览器滚动条宽度。

问题分析

screen.width屏幕分辨率宽度

document.body.scrollWidth 页面完整宽度

document.body.scrollHeight 页面完整宽度

document.body.clientWidth width+左右padding

document.body.clientHeight height + 上下padding

document.body.offsetWidth 网页可见区域宽度

document.body.offsetHeight 网页可见区域高度

body中插入一个div，div中再嵌套一个div，设置外部的div的overflower为scroll，

可以出现滚动条轨道，然后使用外部div宽度值减去内部div的宽度值即可。

得到滚动条宽度之后，把添加的元素删掉。

解决方案

方法一：简单方法

var cWidth = document.body.clientWidth || document.documentElement.clientWidth;//页面可视区域宽度
var iWidth = window.innerWidth;//浏览器窗口大小
console.log(iWidth - cWidth);//打印滚动条宽度

方法二：iView的解决方案

https://github.com/iview/iview/blob/2.0/src/utils/assist.js

// For Modal scrollBar hidden
let cached;
export function getScrollBarSize (fresh) {if (isServer) return 0;if (fresh || cached === undefined) {const inner = document.createElement('div');inner.style.width = '100%';inner.style.height = '200px';const outer = document.createElement('div');const outerStyle = outer.style;outerStyle.position = 'absolute';outerStyle.top = 0;outerStyle.left = 0;outerStyle.pointerEvents = 'none';outerStyle.visibility = 'hidden';outerStyle.width = '200px';outerStyle.height = '150px';outerStyle.overflow = 'hidden';outer.appendChild(inner);document.body.appendChild(outer);const widthContained = inner.offsetWidth;outer.style.overflow = 'scroll';let widthScroll = inner.offsetWidth;if (widthContained === widthScroll) {widthScroll = outer.clientWidth;}document.body.removeChild(outer);cached = widthContained - widthScroll;}return cached;
}

方法三：Element UI的解决方案

https://github.com/ElemeFE/element/blob/dev/src/utils/scrollbar-width.js

import Vue from 'vue';let scrollBarWidth;export default function() {if (Vue.prototype.$isServer) return 0;if (scrollBarWidth !== undefined) return scrollBarWidth;const outer = document.createElement('div');outer.className = 'el-scrollbar__wrap';outer.style.visibility = 'hidden';outer.style.width = '100px';outer.style.position = 'absolute';outer.style.top = '-9999px';document.body.appendChild(outer);const widthNoScroll = outer.offsetWidth;outer.style.overflow = 'scroll';const inner = document.createElement('div');inner.style.width = '100%';outer.appendChild(inner);const widthWithScroll = inner.offsetWidth;outer.parentNode.removeChild(outer);scrollBarWidth = widthNoScroll - widthWithScroll;return scrollBarWidth;
};

参考文章

http://www.caotama.com/53793.html

https://segmentfault.com/q/1010000004817695

https://my.oschina.net/wangch5453/blog/2967396

https://blog.csdn.net/qq_42089654/article/details/80515916

https://www.cnblogs.com/MakethingsEasy/archive/2011/12/08/2280661.html

JavaScript——获取浏览器滚动条(ScrollBar)宽度相关推荐

html中获取浏览器窗口宽度,JavaScript 获取浏览器窗口的大小
简明现代魔法 -> JavaScript -> JavaScript 获取浏览器窗口的大小 JavaScript 获取浏览器窗口的大小 2010-04-16 程序演示: 获取浏览器当前窗口 ...
Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法
摘要: 由于浏览器的差异,许多信息的获取都要考虑兼容性,窗口中文档可用尺寸是一个经常需要用到的信息,由于浏览器不同甚至版本不同,获取的方法也不一样,本文介绍的函数能够兼容各种浏览器,获取这一信息.同时 ...
js获取浏览器滚动条距离顶端的距离
js获取浏览器滚动条距离顶端的距离一.jQuery获取的相关方法 jquery 获取滚动条高度获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : ...
JavaScript获取浏览器可视区域的宽高
JavaScript获取浏览器可视区域的宽高在做项目的时候,我们常常需要对项目做一些优化,来提升页面响应的速度,比如进入可视区域后再发送请求获取数据或者是填充模板,这个时候就需要能够获取到浏览器的可 ...
js获取浏览器窗口页面宽度、高度的方法 kaki 的博客
js获取浏览器窗口页面宽度.高度的方法不多说,直接上代码 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()) ...
编辑器js获取浏览器高度和宽度值(转)
js获取浏览器高度和宽度值网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...
java中如何设置浏览器宽度_[Java教程]关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)_星空网...
关于JS中获取浏览器高度和宽度值的多种方法(多浏览器) 2017-08-07 0 三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 d ...
html浏览器宽度,JavaScript获取浏览器、元素、屏幕的宽高尺寸
版权声明转载请告知并注明来源作者作者:唐金健网络昵称:御焱掘金知乎思否专栏:优雅的前端前言有时候在获取浏览器.元素.屏幕的尺寸,傻傻分不清.为了让自己清晰认识,能够快速确定自己需要哪个属性 ...
JavaScript获取浏览器、元素、屏幕的宽高尺寸
版权声明转载请告知并注明来源作者作者:唐金健网络昵称:御焱掘金知乎思否专栏:优雅的前端前言有时候在获取浏览器.元素.屏幕的尺寸,傻傻分不清.为了让自己清晰认识,能够快速确定自己需要哪个属性 ...

JavaScript——获取浏览器滚动条(ScrollBar)宽度