Wie verhindert man, dass eine Webkit-Scrollbar den Inhalt eines div überstreicht?

Question

Ich benutze Webkit-Scrollbar und stoße in Stylingprobleme, da die Webkit-Bildlaufleiste den Inhalt eines Div nach links verschiebt, was dazu führt, dass der Inhalt überläuft.

Hinweis

• 1. Box verwendet die Scrollbar Standard-Browser und nicht überläuft (gut)
• 2. Box verwendet die webkit Scrollbar, die das Layout zu brechen endet. (Bad/Problem)

http://jsfiddle.net/ryeah/1/

Irgendwelche Ideen, was ich mit webkit Scrollbar falsch machen zu bewirken, dass die div/Überlauf. Wie können wir die 2. Box reparieren? Dank

Webkit Scrollbar Code:

.box2::-webkit-scrollbar { 
    height: 16px; 
    overflow: visible; 
    width: 16px; 
} 
.box2::-webkit-scrollbar-thumb { 
    background-color: rgba(0, 0, 0, .2); 
    background-clip: padding-box; 
    border: solid transparent; 
    border-width: 1px 1px 1px 6px; 
    min-height: 28px; 
    padding: 100px 0 0; 
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07); 
} 
.box2::-webkit-scrollbar-button { 
    height: 0; 
    width: 0; 
} 
.box2::-webkit-scrollbar-track { 
    background-clip: padding-box; 
    border: solid transparent; 
    border-width: 0 0 0 4px; 
} 
.box2::-webkit-scrollbar-corner { 
    background: transparent; 
} 

Answer 1

Hm .. Ich kann nicht einen Weg finden, die Webkit Scrollbar in Overlay zu erhalten. Eine Lösung für den Zeilenumbruch zu stoppen ist die Scrollbar mit

.box2::-webkit-scrollbar { 
    height: 16px; 
    overflow: visible; 
    width: 16px; 
    display: none; 
} 

anderem verstecken Sie die Breite Ihres UL auf das gleiche wie die Box gesetzt, so können Sie die Verwendung der Überlauffunktion und zeigt unter dem Scrollbar machen

.box ul { 
    width: 149px; 
} 

Answer 2

Haben Sie versucht, overflow-y:overlay in den übergeordneten div? Es funktioniert für mich in Chrom. This page sagt, es funktioniert auch in Safari.

Answer 3

Es gibt eine Möglichkeit, die Bildlaufleiste außerhalb des div anzuzeigen.

Verwenden Sie eine statische Breite und haben Sie die Div-Position als absolut. Funktioniert bei mir.

#divID{ 
overflow: hidden; 
width: calc(1024px + 0); 
} 

#divID:hover{ 
overflow-y:scroll; 
} 

Dies täuscht das DOM.