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

问题描述 投票：9回答：3

我不确定标题是否清楚，所以解释的话很少。我有几个小元素，让我们说div（200px x 400px CONSTANT）。在每个内部，有一个段落有大约20行文本。当然，这对于一个可怜的小div来说很重要。我想做的是：

  1. 通常div有overflow: hidden财产。
  2. 鼠标悬停（:hover）后，此属性将更改为overflow: auto;，并显示滚动条。

问题是什么？我想在段落文本和滚动条之间留一点空间（填充或边距）。让我们说段落有一个对称的margin: 20px;。但是在:hover触发后，滚动条出现，并且段落的整个右侧向左移动"scrollbar-width" px。句子在其他行中被打破，整个段落看起来不同，这非常烦人且不方便用户。我怎样才能设置我的CSS，所以悬停后唯一的变化就是scroolbar的外观？

换一种说法：

/* 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>
html css css3 width scrollbar
3个回答
12
投票

根据浏览器和操作系统，所有滚动条可能不同，因此您必须使用javascript。

我在这里找到了一个很酷的片段：http://davidwalsh.name/detect-scrollbar-width

这是一个例子：qazxsw poi

js代码创建一个div http://jsfiddle.net/a1m6an3u/，查看滚动条的大小并返回它。

它看起来像这样：

.scrollbar-measure

所以我很快添加了一些jquery代码，但我认为你只能在JS中完成它。

1
投票

虽然tomtomtom的答案非常有效，但它需要一个看起来有点不必要的外部CSS片段，Yurii的答案需要jQuery，这对于这个来说似乎有点过分。一个稍微更新和自包含的答案（也可以在JavaScript模块设置中使用）是：

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); // Mac:  15

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

然后可以像这样使用这个类：

class TempScrollBox {
  constructor() {
    this.scrollBarWidth = 0;

    this.measureScrollbarWidth();
  }

  measureScrollbarWidth() {
    // Add temporary box to wrapper
    let scrollbox = document.createElement('div');

    // Make box scrollable
    scrollbox.style.overflow = 'scroll';

    // Append box to document
    document.body.appendChild(scrollbox);

    // Measure inner width of box
    this.scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;

    // Remove box
    document.body.removeChild(scrollbox);
  }

  get width() {
    return this.scrollBarWidth;
  }
}

小提琴：let scrollbox = new TempScrollBox(); console.log(scrollbox.width) //-> 17 (Windows, Chrome)

0
投票

如果像我这样的人通过谷歌搜索“如何获得浏览器滚动条宽度”找到这个问题，这里是没有任何额外CSS类的jQuery实现：

https://jsfiddle.net/nu9oy1bc/

或者var div = $("<div style='overflow:scroll;position:absolute;top:-99999px'></div>").appendTo("body"), width = div.prop("offsetWidth") - div.prop("clientWidth"); div.remove(); console.log(width); ，如果你愿意的话。

感谢JSFiddle的想法

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.