CSS: Wie erhält man die Scrollbar-Breite des Browsers? (Für: Hover {overflow: auto} schöne Ränder)

Question

Ich bin mir nicht sicher, ob Titel klar ist, so wenige Worte der Erklärung. Ich habe einige kleine Elemente bekam, ließ div ‚s sagen (200px x 400px CONSTANT). In jedem von ihnen gibt es einen Absatz mit etwa 20 Textzeilen. Natürlich ist dies zu viel für eine arme kleine div. Was ich tun möchte, ist:

1. Normalerweise divoverflow: hidden Eigenschaft hat.
2. auf der Maus über (:hover) diese Eigenschaft auf overflow: auto; geändert und die Bildlaufleiste angezeigt.

Was ist das Problem? Ich möchte ein wenig Abstand (Abstand oder Rand) zwischen dem Absatztext und der Bildlaufleiste. Nehmen wir an, dieser Absatz hat eine symmetrische margin: 20px;. Aber nach :hover auslöst, erscheint die Bildlaufleiste, und die ganze rechte Seite des Absatzes "scrollbar-width" px nach links bewegt. Sätze sind in anderen Zeilen unterbrochen und der ganze Absatz sieht anders aus, was ziemlich nervig und nicht benutzerfreundlich ist. Wie kann ich mein CSS einstellen, so dass die einzige Änderung nach dem Hover das Erscheinen von scroolbar sein wird?

Mit anderen Worten:

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

ich ein kleines Snippet für sie getan haben, mit exaplanation meines Problems in strong. Ich hoffe alles ist klar :). Ich suche jetzt seit fast zwei Stunden nach einer Lösung, also denke ich, dass meine Frage ziemlich einzigartig und interessant ist.

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

Alle Scrollbar können nach Browser und Betriebssystem unterschiedlich sein, so dass Sie Javascript verwenden.

fand ich einen kühlen Schnipsel hier: http://davidwalsh.name/detect-scrollbar-width

Und dass ein exemple: http://jsfiddle.net/a1m6an3u/

Der js Code erstellen div .scrollbar-measure, die Größe des Rollbalkens sehen und sie zurückbringen.

Es wird wie folgt aussehen:

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

So fügte ich schnell einige jQuery-Code, aber ich glaube, Sie es in nur JS tun können.