CSS：如何獲得瀏覽器滾動條寬度？ （用於：懸停{overflow：auto}好利潤）

Question

我不確定標題是否清楚，所以很少有解釋的字眼。我有幾個小元素，比如說div's（200px x 400px CONSTANT）。在他們的每一個裏面，都有一段包含大約20行文字的段落。 當然，這對於一個可憐的小格子來說很多。我想要做的是：

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做了它一個小片段，與我的問題的exaplanation。我希望一切都清楚:)。我正在尋找一個近兩個小時的解決方案，所以我認爲我的問題非常獨特和有趣。

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>

Answer 1

所有的滾動條可以根據瀏覽器和操作系統的不同，所以你必須使用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做到這一點。