js获取页面滚动条宽度

阳光穿透心脏的1/2处 2021-12-14 05:57 381阅读 0赞

let cached;
    function getScrollBarSize(fresh){ 
    	//fresh 是否重新获取, cached: 是否获取过
    	if(fresh || cahced===undefined) { 
    		const inner = document.createElement('div');
    		inner.style.width = '100%';
    		inner.style.height = '200px';
    
    		const outer = document.createElement('div');
    		outer.style.position = 'absolute';
    		outer.style.top =  0;
    		outer.style.left = 0;
    		outer.style.visibility = 'hidden';
    		outer.style.width = '200px';
    		outer.style.height = '150px'; //父元素高度比内部元素高度小
    		outer.style.overflow = 'hidden';
    		outer.appendChild(inner);
    	
    		document.body.appendChild(outer);
    		
    		const widthContained = inner.offsetWidth;
    		outer.style.overflow = 'scroll'; //让滚动条显示出来
    		let widthScroll = inner.offsetWidth; //offsetWidth: content+padding+border
    		
    		if(widthContained === widthScroll){ 
    			widthScroll = outer.clientWidth; //clientWidth： content + padding
    		}
    		document.body.removeChild(outer);
    		/** const widthContained = outer.offsetWidth; const widthScroll = outer.clientWidth; document.body.removeChild(outer); **/
    
    		
    		cached = widthContained - widthScroll
    	}
    	return cached;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，381人围观）

还没有评论，来说两句吧...

相关阅读

相关用JS怎么获取浏览器滚动条的宽度

知识点：offsetWidth：获取到的值是width+padding+border； clientWidth：获取对象可见内容的宽度，不包括滚动条，不包括边框；

以你之姓@/ 2023年02月26日 11:22/ 0 赞/ 4 阅读

相关去除页面滚动条

去掉水平滚动条： <body style="overflow-x: hidden"> 去掉竖直滚动条： <body style="overflow-y: hidde

小咪咪/ 2023年01月07日 01:25/ 0 赞/ 123 阅读

相关 JS_获取当前页面的滚动条位置的兼容

方法一 const getScrollPosition = (el = window) => ({ x: el.pageXOffset !==

逃离我推掉我的手/ 2022年11月29日 11:59/ 0 赞/ 205 阅读

相关 [javascript] js 获取页面可视区高度和滚动条高度

获取可视区高度： var clientHeight = document.documentElement.clientHeeight ;

分手后的思念是犯贱/ 2022年08月11日 00:48/ 0 赞/ 259 阅读

相关 JS学习40：计算滚动条的宽度

http://qianduanblog.com/post/js-learning-40-get-scrollbar-width.html 昨天在于江水的博客里看到说弹窗

本是古典何须时尚/ 2022年07月15日 11:14/ 0 赞/ 143 阅读

相关 javascript 获取滚动条高度+常用js页面宽度与高度

/\\\\\\\\\\\\\\\\\\\\ \ 取窗口滚动条高度 \\\\\\\\\\\\\\\\\\/ function getScrollTop()

爱被打了一巴掌/ 2022年06月12日 04:53/ 0 赞/ 255 阅读

相关 js获取页面高度和宽度值

js获取页面高度和宽度值 IE: document.body.clientWidth ==> BODY对象宽度 document.body.clientHe

素颜马尾好姑娘i/ 2022年06月08日 13:17/ 0 赞/ 244 阅读

相关 js获取页面宽度高度及屏幕分辨率

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] js获取页面宽度高度及屏幕分辨率网页可见区域宽：document.body.

忘是亡心i/ 2022年01月15日 03:59/ 0 赞/ 322 阅读

相关 js获取页面滚动条宽度

let cached; function getScrollBarSize(fresh){ //fresh 是否重新获取, cached: 是否获取

阳光穿透心脏的1/2处/ 2021年12月14日 05:57/ 0 赞/ 382 阅读

相关 js 滚动条属性、设置滚动条滚动速度

返回不带px的数值,没用负数,最小为0 .scrollTop 竖直滚动条到顶部的距离,即浏览器视口外的高度 .scrollLeft 水平

冷不防/ 2021年07月24日 20:07/ 0 赞/ 1908 阅读