Làm cách nào để ngăn chặn thanh cuộn webkit đẩy nội dung của div?

Question

Tôi đang sử dụng thanh cuộn webkit và đang chạy vào các vấn đề về kiểu dáng vì thanh cuộn webkit đang đẩy nội dung của div sang bên trái khiến nội dung bị tràn.

Thông báo

• hộp 1st sử dụng thanh cuộn trình duyệt mặc định và không tràn (tốt)
• hộp thứ 2 sử dụng thanh cuộn webkit mà kết thúc lên phá vỡ bố cục. (Xấu/vấn đề)

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

Bất kỳ ý tưởng những gì tôi đang làm sai với webkit thanh cuộn để khiến div đến/tràn. Làm thế nào chúng ta có thể sửa chữa hộp thứ 2? Cảm ơn

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 .. Tôi không thể nghĩ ra một cách để có được thanh cuộn webkit trong lớp phủ. Một giải pháp để ngăn chặn dòng bẻ là để ẩn thanh cuộn với

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

khác mà bạn có thể thiết lập độ rộng của UL của bạn để giống như hộp nên nó làm cho việc sử dụng chức năng tràn và hiển thị dưới thanh cuộn

.box ul { 
    width: 149px; 
} 

Answer 2

Bạn đã thử đặt overflow-y:overlay trong div gốc? Nó làm việc cho tôi trong chrome. This page nói rằng nó hoạt động trong safari, quá.

Answer 3

Có một cách để có thanh cuộn hiển thị bên ngoài div.

Sử dụng chiều rộng tĩnh và có vị trí div là tuyệt đối. Làm việc cho tôi.

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

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

Điều này sẽ đánh lừa DOM.