CSS: come ottenere la larghezza della barra di scorrimento del browser? (per: hover {overflow: auto} nice margins)

Question

Non sono sicuro che il titolo sia chiaro, quindi poche parole di spiegazione. Ho pochi elementi, diciamo div (200px x 400px COSTANTE). All'interno di ognuno di essi, c'è un paragrafo con circa 20 righe di testo. Ovviamente, questo è troppo per un piccolo div sparitore. Quello che voglio fare è:

1. Normalmente div ha overflow: hidden proprietà.
2. Con il mouse sopra (:hover) questa proprietà viene modificata in overflow: auto; e viene visualizzata la barra di scorrimento.

Qual è il problema? Voglio un po 'di spazio (padding o margine) tra il testo del paragrafo e la barra di scorrimento. Diciamo che il paragrafo ha una simmetria margin: 20px;. Ma dopo l'attivazione dei trigger :hover, viene visualizzata la barra di scorrimento e l'intero lato destro del paragrafo viene spostato a sinistra di "scrollbar-width" px. Le frasi sono spezzate in altre righe e l'intero paragrafo appare diverso, il che è piuttosto fastidioso e non facile da usare. Come posso impostare il mio CSS, quindi l'unica modifica dopo il passaggio del mouse sarà l'aspetto di scroolbar?

In altre parole:

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

Ho fatto un piccolo frammento di esso, con exaplanation del mio problema a strong. Spero sia tutto chiaro :). Sto cercando una soluzione da quasi due ore, quindi penso che la mia domanda sia piuttosto unica e interessante.

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

Tutti barra di scorrimento può essere diverso a seconda del browser e del sistema operativo quindi è necessario utilizzare javascript.

ho trovato un frammento fresco qui: http://davidwalsh.name/detect-scrollbar-width

E che un exemple: http://jsfiddle.net/a1m6an3u/

Il js codice di creare un div .scrollbar-measure, guardare la dimensione della barra di scorrimento e di restituirlo.

E 'simile a questa:

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

così ho aggiunto un po' di fretta codice jQuery ma penso che si può fare solo in JS.