Jak uniemożliwić przewijanie paska przewijania przez zawartość elementu div?

Question

Używam paska przewijania webkit i mam problemy z stylizacją, ponieważ pasek przewijania webkita przesuwa zawartość elementu div po lewej stronie, co powoduje przepełnienie zawartości.

Wskazówka

• 1-ta skrzynka używa przewijania domyślną przeglądarkę i nie przepełnić (dobrze)
• 2-te skrzynka używa przewijania WebKit, który kończy się zerwania układu. (Bad/Problem)

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

Wszelkie pomysły, co robię źle z WebKit przewijania aby spowodować div/przelew. Jak możemy naprawić drugie pudełko? Dzięki

Webkit Kod Scrollbar:

.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 .. Nie mogę myśleć o sposób, aby uzyskać przewijania WebKit w nakładce. Jednym z rozwiązań, aby zatrzymać łamanie wiersza jest ukrycie paska przewijania z

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

inne można ustawić szerokość swojego UL aby taka sama jak pudełka więc to sprawia, że ​​korzystanie z funkcji przelewu i wyświetlaczy pod przewijania

.box ul { 
    width: 149px; 
} 

Answer 2

Czy próbowałeś wstawić overflow-y:overlay w div rodzica? Działa dla mnie w chromie. This page mówi, że działa również na safari.

Answer 3

Istnieje sposób na wyświetlenie paska przewijania poza elementem div.

Użyj statycznej szerokości i pozycję div jako absolutną. Pracuje dla mnie.

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

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

To głupia DOM.