DIV với các góc tròn và thanh cuộn bên trong

Question

Tôi đang cố gắng đạt được một tình huống trong đó DIV có các thanh cuộn bên trong và các góc bo tròn. đầu tiên tôi đã cố gắng dẫn này:

Các góc tay phải trở thành hình vuông, trên tài khoản của thanh cuộn.

Tiếp theo, tôi đã thêm một div nội bộ với một số đệm trên cùng và dưới cùng, để đẩy thanh cuộn xuống và duy trì các dây được đếm. Đó ra như thế này:

Tôi muốn một lai nơi thanh cuộn là toàn bộ chiều dài của div nhưng không làm cho các góc vuông. Điều này có thể không?

Answer 1

Bạn nên thử thanh cuộn tùy chỉnh. Trên ảnh chụp màn hình của bạn, bạn đang ở trên hệ điều hành OS X, nhưng với IE (Windows), nó sẽ bị hỏng.

Hãy xem trên this stackoverflow question.

Answer 2

Bạn có thể sử dụng border-radius vùng chứa xung quanh (scrollbar-track) của thanh cuộn (scrollbar-thumb).

dụ:

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

jsFiddle: http://jsfiddle.net/p2bWf/

nguồn: http://css-tricks.com/custom-scrollbars-in-webkit/