CSS：如何获取浏览器滚动条的宽度？ （对于 :hover {overflow: auto} 不错的边距）

Question

我不确定标题是否清楚，所以解释不多。我有一些小元素，比方说 div 的（ 200px x 400px 常数）。在他们每个人的里面，都有一个段落，大约有 20 行文字。 当然，这对于一个可怜的小 div 来说已经够多了。我想做的是：

1. 通常 div 有 overflow: hidden 属性。
2. 将鼠标悬停在 ( :hover ) 上时，此属性更改为 overflow: auto; ，并出现滚动条。

问题是什么？我想要段落文本和滚动条之间有一点空间（填充或边距）。假设该段落有一个对称的 margin: 20px; 。但是在 :hover 触发后，滚动条出现，段落的整个右侧移动 "scrollbar-width" px 向左移动。其他行断句，整个段落看起来都不一样，这很烦人而且不友好。我如何设置我的 CSS，所以悬停后唯一的变化就是滚动条的外观？

换一种说法：

 /* Normally no scrollbar */
div {display: block; width: 400px; height: 200px; overflow: hidden;}
/* On hover scrollbar appears */
div:hover {overflow: auto;}

/* Paragraph margin predicted for future scrollbar on div */
div p {margin: 20px (20px + scrollbarwidth px) 20px 50px;}
/* With scrollbar margin is symmetrical */
div:hover p {margin: 20px;} /* With scrollbar */

我为此做了一些片段，并在 strong 中解释了我的问题。我希望一切都清楚 :)。 我现在正在寻找解决方案将近两个小时，所以我认为我的问题非常独特且有趣。

 div.demo1 {
  width: 400px;
  height: 200px;
  overflow: hidden;
  background: #ddd;
}
div.demo1:hover {
  overflow: auto;
}
div.demo1 p {
  background: #eee;
  margin: 20px;
}
div.demo2 {
  width: 400px;
  height: 200px;
  overflow: hidden;
  background: #ddd;
}
div.demo2:hover {
  overflow: auto;
}
div.demo2 p {
  background: #eee;
  margin: 20px 40px 20px 20px;
}
div.demo2:hover p {
  margin: 20px 20px 20px 20px;
}

 <div class="demo1">
  <p>
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
  </p>
</div>
<br>
<br>
<strong>As you can see, on hover right side of the paragraph "moves" left. But I want something like:</strong>
<br>
<br>
<div class="demo2">
  <p>
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
    This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
  </p>
</div>

<strong>But with a "perfect" scrollbar width (in this example I used 20px)</strong>

原文由 Jacek Kowalewski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

滚动条宽度因浏览器和操作系统而异，不幸的是 CSS 没有提供检测这些宽度的方法：我们需要使用 JavaScript。

其他人通过测量元素上滚动条的宽度解决了这个问题：

• http://davidwalsh.name/detect-scrollbar-width （原帖）
• http://jsfiddle.net/a1m6an3u/ （实例）

我们创建一个 div .scrollbar-measure ，添加一个滚动条，并返回它的大小。

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

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth);

// Delete the div
document.body.removeChild(scrollDiv);

这相当简单，但（显然）不是纯 CSS。

原文由 tomtomtom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

innerWidth 返回浏览器视口的宽度，包括滚动条。

只读窗口属性 innerWidth 返回窗口的内部宽度（以像素为单位）。这包括垂直滚动条的宽度（如果存在）。

clientWidth 在像 document 这样的根元素上使用时返回视口的宽度，不包括滚动条。

当 clientWidth 用于根元素（元素）（或者如果文档处于 quirks 模式时），将返回视口的宽度（不包括任何滚动条）。

 let scrollbarWidth = (window.innerWidth - document.body.clientWidth) + 'px';

减去这两个值，瞧，你得到滚动条的宽度。

这个例子通常会返回： 15px

原文由 gummiost 发布，翻译遵循 CC BY-SA 4.0 许可协议