body: overflow-x - vẫn có thể cuộn qua bằng bàn di chuột

Question

Tôi có một div có số position: absolute và nó chỉ rộng hơn một chút so với cửa sổ trình duyệt của tôi. Tôi đã ẩn thành công thanh cuộn ngang, nhưng tôi vẫn có thể cuộn qua bằng bàn di chuột Macbook.

Có cách nào để vượt qua điều này không?

<div id="container"> 
    <div id="big-image"></div> 
</div><!-- #container --> 

#container { 
    overflow-x: hidden; 
} 

#big-image { 
    background: transparent url('/path/to/image.png') no-repeat center top; 
    position: absolute; 
    width: 1307px; 
    left: 50%; 
    margin: 0 0 0 -653.5px; 
    z-index: 4; 
} 

Answer 1

Nếu bạn không giới hạn chiều cao của #container, chỉ cần đặt tràn để ẩn, vì tràn-x là lạ ở chỗ nó loại bỏ thanh cuộn, nhưng vẫn cho phép bạn cuộn.

Ví dụ

body { 
    overflow-x: hidden; 
} 

#container { 
    overflow: hidden; 
    width: 100%; 
} 

Answer 2

Có thể bạn có thể sử dụng position: fixed; trên #big-image.