下面的 HTML 将在 div.container 的右内边缘显示一个滚动条。
是否可以确定该滚动条的宽度？
<div class="container" style="overflow-y:auto; height:40px;">
<div class="somethingBig"></div>
</div>
使用 JavaScript 获取滚动条宽度
IT技术
javascript
2021-01-31 07:42:00
6个回答
这个函数应该给你滚动条的宽度
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;
}
这里的基本步骤是：
- 创建隐藏的 div（外部）并获取它的偏移宽度
- 使用 CSS 溢出属性强制滚动条出现在 div（外部）中
- 创建新的 div（内部）并附加到外部，将其宽度设置为 '100%' 并获得偏移宽度
- 根据收集的偏移量计算滚动条宽度
这里的工作示例：http : //jsfiddle.net/slavafomin/tsrmgcu9/
更新
如果您在 Windows（地铁）应用程序上使用它，请确保将“外部”div的-ms-overflow-style属性设置为scrollbar，否则将无法正确检测宽度。（代码更新）
更新 #2 这不适用于 Mac OS 的默认“滚动时仅显示滚动条”设置（优胜美地及以上）。
// offsetWidth包含滚动条的宽度，clientWidth不包含。通常，它等于 14-18px。所以：
var scrollBarWidth = element.offsetWidth - element.clientWidth;
我认为这将是简单而快速的-
var scrollWidth= window.innerWidth-$(document).width()
如果孩子占据容器的整个宽度，不包括滚动条（默认），那么您可以减去宽度：
var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;
如果你使用jquery。ui，试试这个代码：
$.position.scrollbarWidth()