Tự động ẩn thanh cuộn dọc bằng cách sử dụng tràn css

Question

Tôi gặp phải sự cố khi sử dụng tràn css để tự động cuộn thanh cuộn dọc. Tôi đọc trong một vài bài viết để sử dụng lớp giả pss giả css để đạt được hành vi này và điều tốt là tôi thành công ở một mức độ nào đó.

Tôi đã sử dụng cả 'cuộn' và 'tự động' cho thuộc tính tràn-y. Với cuộn nó hoạt động như một sự quyến rũ, nhưng với 'di chuyển' vấn đề là ngay cả khi không cần phải hiển thị thanh cuộn, nó có thể nhìn thấy mà tôi cảm thấy 'tự động' làm rất tốt.

Nhưng một lần nữa với 'tự động' vấn đề là có một khoảng cách 16px (tôi giả định) ở phía bên phải. Có lẽ đó là chiều rộng của thanh cuộn. Tôi muốn toàn bộ chiều rộng. Tôi đã sử dụng một nền tảng để giải thích vấn đề của mình.

Dưới đây là phần bổ sung. http://jsfiddle.net/9scJE/

div.autoscroll { 
    height: 200px; 
    width: 400px; 
    overflow: hidden; 
    border: 1px solid #444; 
    margin: 3em; 
} 

div.autoscroll:hover { 
    /* overflow-y: scroll; */ 
    overflow-y: auto; 
} 

Đánh giá cao sự trợ giúp.

Answer 1

Điều này thực sự có vẻ như một lỗi trình duyệt với tôi, nhưng có vẻ như để làm việc như bạn muốn nếu bạn thêm padding-right: 1px khi di chuột.

div.myautoscroll:hover { 
    overflow: auto; 
    padding-right: 1px; 
} 

http://jsfiddle.net/ExplosionPIlls/9scJE/1/

Answer 2

Bạn có thể thêm width: 100%; khi di chuột trên div:

div.myautoscroll:hover { 
    overflow: auto; 
    width: 100%; 
} 

Working Demo

Answer 3

Bạn nên bù đắp cho sự thanh cuộn với lớp đệm.

div.autoscroll:hover { 
    /* overflow-y: scroll; */ 
    overflow-y: scroll; 
padding-right: 16px; 

} 

Tuy nhiên, tốt hơn nên làm điều này với javascript vì chiều rộng thanh cuộn hơi khác nhau giữa các trình duyệt. Tôi đã sử dụng giải pháp này thành công: How to calculate the width of the scroll bar?