如何在 JavaScript 中确定水平滚动条的高度或垂直滚动条的宽度？
如何获取浏览器的滚动条大小？
IT技术
javascript
scrollbar
2021-02-04 21:49:21
6个回答
从Alexandre Gomes 博客 我还没有尝试过。请让我知道这对你有没有用。
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
使用 jQuery，您可以将 Matthew Vines 的回答缩短为：
function getScrollBarWidth () {
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
return 100 - widthWithScroll;
};
如果你正在寻找一个简单的操作，只需混合纯 dom js 和 jquery，
var swidth=(window.innerWidth-$(window).width());
返回当前页面滚动条的大小。（如果它是可见的，否则将返回 0）
这是我发现的唯一脚本，它在 webkit 浏览器中工作...... :)
$.scrollbarWidth = function() {
var parent, child, width;
if(width===undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
child=parent.children();
width=child.innerWidth()-child.height(99).innerWidth();
parent.remove();
}
return width;
};
最小化版本：
$.scrollbarWidth=function(){var a,b,c;if(c===undefined){a=$('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');b=a.children();c=b.innerWidth()-b.height(99).innerWidth();a.remove()}return c};
你必须在文档准备好时调用它......所以
$(function(){ console.log($.scrollbarWidth()); });
2012 年 3 月 28 日在最新的 FF、Chrome、IE 和 Safari 中在 Windows 7 上测试，100% 工作。
来源：http : //benalman.com/projects/jquery-misc-plugins/#scrollbarwidth
对我来说，最有用的方法是
(window.innerWidth - document.getElementsByTagName('html')[0].clientWidth)
使用原生 JavaScript。
