CSS：如何获取浏览器滚动条宽度？(For：Hover{overflow：AUTO}漂亮页边距) [英] CSS: How to get browser scrollbar width? (for :hover {overflow: auto} nice margins)

问题描述

我不确定标题是否清楚，所以解释的话很少。我有几个小元素，比方说div的(200pxx400px常量)。每个元素里面都有一个大约20行文本的段落。当然，对于一个可怜的小div来说，这已经够多了。我想做的是：

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

有什么问题？我想在段落文本和滚动条之间留一点空格(填充或边距)。假设该段落有一个对称的margin: 20px;。但在:hover触发后，滚动条会出现，并且段落的整个右侧将"scrollbar-width" px移至左侧。句子被分成其他几行，整个段落看起来也不一样，这很烦人，也不方便使用。如何设置我的CSS，以便悬停后唯一的更改将是Sroolbar的外观？

换言之：

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

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。

这篇关于CSS：如何获取浏览器滚动条宽度？(For：Hover{overflow：AUTO}漂亮页边距)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！