使用 JavaScript 获取滚动条宽度

下面的 HTML 将在 div.Container 的右边缘显示一个滚动条。

是否可以确定滚动条的宽度？

<div class="container" style="overflow-y:auto; height:40px;">
<div class="somethingBig"></div>
</div>
166902 次浏览
小开

如果子代获取容器的全宽(不包括滚动条(默认值)) ，那么可以减去宽度:

var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;
小开
最佳答案

这个函数应该给你滚动条的宽度

function getScrollbarWidth() {


// 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;


}

基本步骤如下:

  1. 创建隐藏的 div (外部)并得到它的偏移宽度
  2. 使用 CSS 溢出属性强制将滚动条显示在 div (外部)中
  3. 创建新的 div (inner)并将其附加到外部，将其宽度设置为“100%”并得到偏移宽度
  4. 根据收集的偏移量计算滚动条宽度

工作示例: http://jsfiddle.net/slavafomin/tsrmgcu9/

更新

如果你在 Windows (地铁)应用程序上使用这个，请确保将“外部”div 的 - M-溢出式属性设置为 scrollbar，否则宽度将不会被正确检测到。(代码更新)

更新 # 2 这在默认设置为“滚动时只显示滚动条”(Yosemite 和 up)的 Mac OS 上不起作用。

小开

我使用 next 函数得到滚动条的高度/宽度:

function getBrowserScrollSize(){


var css = {
"border":  "none",
"height":  "200px",
"margin":  "0",
"padding": "0",
"width":   "200px"
};


var inner = $("<div>").css($.extend({}, css));
var outer = $("<div>").css($.extend({
"left":       "-1000px",
"overflow":   "scroll",
"position":   "absolute",
"top":        "-1000px"
}, css)).append(inner).appendTo("body")
.scrollLeft(1000)
.scrollTop(1000);


var scrollSize = {
"height": (outer.offset().top - inner.offset().top) || 0,
"width": (outer.offset().left - inner.offset().left) || 0
};


outer.remove();
return scrollSize;
}

这个基于 jQuery 的解决方案适用于 IE7 + 和所有其他现代浏览器(包括滚动条高度/宽度为0的移动设备)。

小开

这里有一个使用 jQuery 的简单方法。

var scrollbarWidth = jQuery('div.withScrollBar').get(0).scrollWidth - jQuery('div.withScrollBar').width();

基本上，我们从总宽度中减去可滚动的宽度，这应该提供滚动条的宽度。当然，您需要缓存 jQuery (‘ div.withScrollBar’)选项，这样就不会重复执行该部分。

小开

这对我很有效。

 function getScrollbarWidth() {
var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'scroll');
var w2 = $('div', div).innerWidth();
$(div).remove();
return (w1 - w2);
}
小开

假设容器只在页面上出现一次，并且您正在使用 jQuery，那么:

var containerEl = $('.container')[0];
var scrollbarWidth = containerEl.offsetWidth - containerEl.clientWidth;

有关详细信息，请参阅 这个答案。

小开

offsetWidth包含滚动条的宽度，而 clientWidth不包含滚动条的宽度。按照惯例，它等于14-18px。所以:

let scrollBarWidth = element.offsetWidth - element.clientWidth;

如果元素当前没有滚动条，返回0。这里有一个简单的函数，通过创建一个有滚动条的临时元素来计算浏览器的滚动条宽度:

function getScrollBarWidth() {
let el = document.createElement("div");
el.style.cssText = "overflow:scroll; visibility:hidden; position:absolute;";
document.body.appendChild(el);
let width = el.offsetWidth - el.clientWidth;
el.remove();
return width;
}
小开

如果使用 jquery.[俄语]，请尝试以下代码:

$.position.scrollbarWidth()
小开

我认为这将是简单和快速-

var scrollWidth= window.innerWidth-$(document).width()

提交答案