html – CSS：如何获取浏览器滚动条宽度？ (for：hover {overflo

发布时间：2020-12-14 18:32:55 所属栏目：资源来源：网络整理

导读：我不确定标题是否清楚,所以解释的话很少.我有几个小元素,比方说div(200px x 400px CONSTANT).在每个内部,有一个段落有大约20行文本.当然,这对于一个可怜的小div来说更是如此.我想做的是：通常div有溢出：隐藏属性. 鼠标悬停(：悬停)时,此属性更改为overflow

我不确定标题是否清楚,所以解释的话很少.我有几个小元素,比方说div(200px x 400px CONSTANT).在每个内部,有一个段落有大约20行文本.当然,这对于一个可怜的小div来说更是如此.我想做的是：

>通常div有溢出：隐藏属性.
>鼠标悬停(：悬停)时,此属性更改为overflow：auto;,并显示滚动条.

问题是什么？我想在段落文本和滚动条之间留一点空间(填充或边距).假设段落具有对称边距：20px;.但之后：悬停触发器打开,滚动条出现,段落的整个右侧向左移动“滚动条宽度”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 */

我已经为它做了一个小片段,我强烈地解释了我的问题.我希望一切都很清楚:).我现在正在寻找解决方案近两个小时,所以我认为我的问题非常独特和有趣.

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>

解决方法

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

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

这是一个例子：http://jsfiddle.net/a1m6an3u/

js代码创建一个div .scrollbar-measure,查看滚动条的大小并返回它.

它看起来像这样：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!