使用JavaScript获取滚动条宽度[重复]

Answer 1

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

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（内部）并附加到外部，将其宽度设置为“100%”并获取偏移宽度
4. 根据收集的偏移量计算滚动条宽度

此处的工作示例：http://jsfiddle.net/slavafomin/tsrmgcu9/

更新

如果您在 Windows (metro) 应用程序上使用此功能，请确保将“outer”div 的 -ms-overflow-style 属性设置为

scrollbar

，否则将无法正确检测宽度。 （代码已更新）

更新#2 在默认的“仅在滚动时显示滚动条”设置（Yosemite 及以上）的 Mac OS 上，这将给出值为 0，这可能是也可能不是预期的。

Answer 2

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

Answer 3

我认为这会简单快捷 -

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

Answer 4

如果子项采用容器的整个宽度，不包括滚动条（默认），那么您可以减去宽度：

var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;

Answer 5

如果您使用jquery。ui，请尝试以下代码：

$.position.scrollbarWidth()

Answer 6

我使用下一个函数来获取滚动条高度/宽度：

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 的移动设备）。

Answer 7

这是使用 jQuery 的简单方法。

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

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

Answer 8

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

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

另请参阅此答案了解更多详细信息。

Answer 9

这对我有用..

 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); 
}