如何得到浏览器的滚动条大小？

如何在 JavaScript 中确定水平滚动条的高度或垂直滚动条的宽度？

164621 次浏览
小开
最佳答案

从 亚历山大 · 戈麦斯博客我还没有尝试它。让我知道它是否为您工作。

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);
};
小开 
window.scrollBarWidth = function() {
document.body.style.overflow = 'hidden';
var width = document.body.clientWidth;
document.body.style.overflow = 'scroll';
width -= document.body.clientWidth;
if(!width) width = document.body.offsetWidth - document.body.clientWidth;
document.body.style.overflow = '';
return width;
}
小开

这是我发现的唯一一个可以在 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日在 Windows7上测试了最新的 FF，Chrome，IE 和 Safari，并且100% 正常工作。

来源: http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth

小开

使用 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;
};
小开

Antiscroll.js的代码是这样的:

function scrollbarSize () {
var div = $(
'<div class="antiscroll-inner" style="width:50px;height:50px;overflow-y:scroll;'
+ 'position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"/>'
+ '</div>'
);


$('body').append(div);
var w1 = $(div).innerWidth();
var w2 = $('div', div).innerWidth();
$(div).remove();


return w1 - w2;
};

密码是 https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447

小开

如果您正在寻找一个简单的操作，只需混合使用普通的 dom js 和 jquery,

var swidth=(window.innerWidth-$(window).width());

返回当前页面滚动条的大小(如果可见，则返回0)

小开 
detectScrollbarWidthHeight: function() {
var div = document.createElement("div");
div.style.overflow = "scroll";
div.style.visibility = "hidden";
div.style.position = 'absolute';
div.style.width = '100px';
div.style.height = '100px';
document.body.appendChild(div);


return {
width: div.offsetWidth - div.clientWidth,
height: div.offsetHeight - div.clientHeight
};
},

在 Chrome，FF，IE8，IE11中测试。

小开

我发现了一个简单的解决方案，可以用于页面内部的元素，而不是页面本身: $('#element')[0].offsetHeight - $('#element')[0].clientHeight

这将返回 x 轴滚动条的高度。

小开

使用 jquery (仅在 firefox 中测试) :

function getScrollBarHeight() {
var jTest = $('<div style="display:none;width:50px;overflow: scroll"><div style="width:100px;"><br /><br /></div></div>');
$('body').append(jTest);
var h = jTest.innerHeight();
jTest.css({
overflow: 'auto',
width: '200px'
});
var h2 = jTest.innerHeight();
return h - h2;
}


function getScrollBarWidth() {
var jTest = $('<div style="display:none;height:50px;overflow: scroll"><div style="height:100px;"></div></div>');
$('body').append(jTest);
var w = jTest.innerWidth();
jTest.css({
overflow: 'auto',
height: '200px'
});
var w2 = jTest.innerWidth();
return w - w2;
}

但实际上我更喜欢“史蒂夫的回答”。

小开

如果您已经有一个带有滚动条的元素，请使用:

function getScrollbarHeight(el) {
return el.getBoundingClientRect().height - el.scrollHeight;
};

如果没有 horzintscrollbar，函数将返回0

小开

这是一个很好的答案: Https://stackoverflow.com/a/986977/5914609

然而，在我的情况下，它没有工作。我花了几个小时寻找解决方案。
最后，我返回到上面的代码，并添加了! 重要的每个样式。并且它工作。
我不能在原来的答案下面添加评论，所以这里有一个解决方案:

function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100% !important";
inner.style.height = "200px !important";


var outer = document.createElement('div');
outer.style.position = "absolute !important";
outer.style.top = "0px !important";
outer.style.left = "0px !important";
outer.style.visibility = "hidden !important";
outer.style.width = "200px !important";
outer.style.height = "150px !important";
outer.style.overflow = "hidden !important";
outer.appendChild (inner);


document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll !important';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;


document.body.removeChild (outer);


return (w1 - w2);
};
小开

你可以用下面的 jquery + javascript 用 document来确定 window滚动条:

var scrollbarWidth = ($(document).width() - window.innerWidth);
console.info("Window Scroll Bar Width=" + scrollbarWidth );
小开

来自 David Walsh 的博客:

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);


// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac:  15


// Delete the DIV
document.body.removeChild(scrollDiv);
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}

在我的网站上有17个，在 Stackoverflow 上有14个。

小开 
function getWindowScrollBarHeight() {
let bodyStyle = window.getComputedStyle(document.body);
let fullHeight = document.body.scrollHeight;
let contentsHeight = document.body.getBoundingClientRect().height;
let marginTop = parseInt(bodyStyle.getPropertyValue('margin-top'), 10);
let marginBottom = parseInt(bodyStyle.getPropertyValue('margin-bottom'), 10);
return fullHeight - contentHeight - marginTop - marginBottom;
}
小开

这个 life-hack 决定将给你机会找到 浏览器滚动宽度(普通的 JavaScript)。使用这个例子，你可以得到滚动宽度 任何元素包括那些元素，不应该有滚动根据您目前的设计概念，:

getComputedScrollYWidth     (el)  {


let displayCSSValue  ; // CSS value
let overflowYCSSValue; // CSS value


// SAVE current original STYLES values
{
displayCSSValue   = el.style.display;
overflowYCSSValue = el.style.overflowY;
}


// SET TEMPORALLY styles values
{
el.style.display   = 'block';
el.style.overflowY = 'scroll';
}


// SAVE SCROLL WIDTH of the current browser.
const scrollWidth = el.offsetWidth - el.clientWidth;


// REPLACE temporally STYLES values by original
{
el.style.display   = displayCSSValue;
el.style.overflowY = overflowYCSSValue;
}


return scrollWidth;
}
小开

创建一个空的 div，并确保它出现在所有页面上(例如，将它放在 header模板中)。

给它这样的造型:

#scrollbar-helper {
// Hide it beyond the borders of the browser
position: absolute;
top: -100%;


// Make sure the scrollbar is always visible
overflow: scroll;
}

然后使用 Javascript 检查 #scrollbar-helper的大小:

var scrollbarWidth = document.getElementById('scrollbar-helper').offsetWidth;
var scrollbarHeight = document.getElementById('scrollbar-helper').offsetHeight;

不需要计算任何东西，因为这个 div将始终有 width和 height的 scrollbar。

唯一的缺点是您的模板中将有一个空的 div。.但是另一方面，你的 Javascript 文件会更干净，因为这只需要1或2行代码。

小开

对我来说，最有用的方法是

(window.innerWidth - document.documentElement.clientWidth)

用普通的 JavaScript。

enter image description here

小开

这个应该能行，不是吗？

function getScrollbarWidth() {
return (window.innerWidth - document.documentElement.clientWidth);
}
小开

下面是一个更简洁易读的基于偏移宽度差异的解决方案:

function getScrollbarWidth(): number {


// Creating invisible container
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll'; // forcing scrollbar to appear
outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
document.body.appendChild(outer);


// Creating inner element and placing it in the container
const inner = document.createElement('div');
outer.appendChild(inner);


// Calculating difference between container's full width and the child width
const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);


// Removing temporary elements from the DOM
outer.parentNode.removeChild(outer);


return scrollbarWidth;


}

看看 JSFiddle。

小开

已经在我的库中进行了编码，所以这里是:

var vScrollWidth = window.screen.width - window.document.documentElement.clientWidth;

我应该提到，jQuery$(window).width()也可以代替 window.document.documentElement.clientWidth使用。

如果你在右边的 Firefox 中打开开发工具，那么它不会工作，但是如果在底部打开开发窗口，它会克服这个问题！

window.screen支持 网址:！

玩得开心！

小开 
function getScrollBarWidth() {
return window.innerWidth - document.documentElement.clientWidth;
}

大多数浏览器使用15px 的滚动条宽度

小开

这看起来是可行的，但是也许有一个更简单的解决方案可以在所有浏览器中运行？

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);


// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac:  15


// Delete the DIV
document.body.removeChild(scrollDiv);
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}

小开

我更新了@Matthew Vines 的回答。

更容易阅读，更容易理解。它不需要内部元素。为获得滚动条宽度而创建的元素有100% 的高度/宽度，所以它不会在低端 PC/移动设备的主体上创建任何可见的滚动条，这可能需要更多的时间来创建元素，获得宽度，并最终删除该元素。

const getScrollBarWidth = () => {
const e = document.createElement('div');
Object.assign(e.style, {
width: '100%',
height: '100%',
overflow: 'scroll',
position: 'absolute',
visibility: 'hidden',
top: '0',
left: '0',
});


document.body.appendChild(e);


const scrollbarWidth = e.offsetWidth - e.clientWidth;


document.body.removeChild(e);


return scrollbarWidth;
};


console.log(getScrollBarWidth());

我建议只检查一次滚动条宽度，在页面加载时(除非它不符合您的需要) ，然后将结果存储在状态/变量中。

小开

我在 material-ui代码中找到了这个解决方案，它对我很有用。

const scrollbarWidth = window.innerWidth -  document.querySelector('body').clientWidth;
小开

您可以使用此解决方案来查找网页内任何元素的滚动条宽度，而不是网页本身。还可以通过将与宽度相关的属性替换为与高度相关的对应属性来重写它，以适用于水平滚动条的滚动条高度。

offsetWidth属性返回内容、填充、边框和滚动条(如果有的话)的总宽度。然而，clientWidth属性只返回内容和填充的总宽度。

因此，如果我们从 offsetWidth中减去 clientWidth和水平边框，我们将留下滚动条的宽度。也就是说，如果有任何滚动条，我们将得到滚动条的宽度。但是如果没有任何滚动条，我们将得到 0。

const element = document.querySelector("div");
const elementStyle = window.getComputedStyle(element);
const horizontalBorder = parseFloat(elementStyle.borderLeftWidth) + parseFloat(elementStyle.borderRightWidth);
const scrollbarWidth = element.offsetWidth - element.clientWidth - horizontalBorder + "px";

提交答案