Bir webkit kaydırma çubuğunun bir div içeriğinin üzerine itilmesini nasıl önleyebilirim?

Question

Webkit kaydırma çubuğunu kullanıyorum ve webkit kaydırma çubuğu, içeriğin taşmasına neden olan bir divın içeriğini sola doğru ittiğinden, stil sorunlarıyla uğraşıyorum.

Bildirimi

• 1 kutu
• 2 kutu düzeni kırarak biter webkit kaydırma çubuğunu kullanır varsayılan tarayıcı kaydırma çubuğunu kullanır ve (iyi) aşmamasını.

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

Ben webkit kaydırma çubuğu ile yanlış ne yapıyorum Herhangi bir fikir div için/taşma neden (kötü/sorun). İkinci kutuyu nasıl düzeltebiliriz? Teşekkür

Webkit Kaydırma çubuğu Kodu:

.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 .. ben overlayinize webkit kaydırma çubuğunu almak için bir yol düşünemiyorum. hat kırılmasını engelleyecek bir çözümü o kaydırma altında taşma fonksiyonu ve ekranların kullanır böylece kutusu olarak aynı şekilde UL genişliğini ayarlayabilirsiniz

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

diğer kaydırma çubuğunu gizlemek için

.box ul { 
    width: 149px; 
} 

Answer 2

Ebeveyn divanına overflow-y:overlay koymayı denediniz mi? Benim için kromda çalışıyor. This page, safaride de çalıştığını söylüyor.

Answer 3

Bölmenin dışında görüntülemek için kaydırma çubuğunu almanın bir yolu vardır.

Statik genişlik kullanın ve div pozisyonunu mutlak olarak kullanın. Benim için çalışıyor.

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

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

Bu DOM'u aptallar.