CSS: Có thể "đẩy" thanh cuộn Webkit vào nội dung không?

Question

Thông thường một thanh cuộn được định vị như thế này:

________________________________________ 
|       |   | 
|   content   | scrollbar | 
|       |   | 
|       |   | 
|       |   | 
|       |   | 
|__________________________|___________| 

tôi về cơ bản tìm cách để có một khoảng cách giữa một "tùy chỉnh" thanh cuộn và ranh giới ngoài của một container cuộn:

________________________________________ 
|     |   |  | 
|  content  | scrollbar | gap | 
|     |  <  |  | 
|     |   |  | 
|     |   |  | 
|     |   |  | 
|____________________|___________|_____| 

Sử dụng một margin-right trên ::-webkit-scrollbar hoặc ::-webkit-scrollbar-track-piece không thành công và thông báo về thanh cuộn kiểu có thể cho trạng thái Webkit:

Lề được hỗ trợ dọc theo trục của thanh cuộn. Chúng có thể là phủ định (do đó, bản nhạc có thể được tăng lên để che phủ các nút một phần).

Tôi hiện đang tự hỏi liệu có ai đã quản lý để đẩy thanh cuộn "vào" nội dung (hoặc ngoài trình bao) cho một số phương tiện khác không hơn margin.

Tôi giả định rằng điều này có thể chỉ có thể (nếu thậm chí) sử dụng một số loại mẹo - bất kỳ ý tưởng nào?

Những thứ khác tôi đã thử không thành công là padding-right: 10px và border-right: 10px solid rgba(255, 255, 255, 0) (đường viền trong suốt).

Answer 1

Tôi nghĩ rằng không thể bằng cách chỉ định lề phải cho thanh cuộn phải. Thanh cuộn là một phần của cửa sổ giao diện người dùng và có thể không được tạo kiểu qua CSS.

Tuy nhiên, bạn chỉ có thể tạo trình bao bọc nội dung xung quanh tất cả các phần tử khác trong HTML của mình, cung cấp độ rộng tối đa, nhỏ hơn 100% và đặt overflow: scroll; cho trình bao bọc. Điều này sẽ đạt được hiệu quả mong muốn và làm việc trong gần như tất cả các trình duyệt.

[ý kiến ​​cá nhân] Tôi nghĩ rằng đó là một thói quen rất xấu của một số nhà thiết kế web nhất định, những người muốn kiểm soát mọi phần của màn hình của tôi. Ví dụ: thanh cuộn phải được tạo kiểu bởi trình quản lý cửa sổ không phải bởi trang web tôi hiện đang xem.

Answer 2

Bạn có thể làm điều đó với đường viền trong suốt. Nhưng bạn cần phải thiết lập background-clip: padding-box; hoặc nó sẽ không hoạt động.

Ví dụ: http://jsfiddle.net/6KprJ/1/