用CSS隱藏溢出

Question

我有一個從屏幕外滑動的菜單。沒有水平滾動條顯示，但仍然可以手動滑動屏幕（在IE和Chrome中，不是Firefox），並在水平溢出中查看屏幕外div。顯然，我真的希望隱藏它。

一個簡單的例子（沒有的JavaScript，使在屏幕外的div幻燈片）可以看出here及以下：

<div id="maintext">I'd like the footer to display below, but the offscreen div to the left to not be visible by scrolling.</div> 
<div id="footer"></div> 
<div id="offscreen"></div> 

body{ 
overflow-x:hidden;  
} 

#footer{ 
position:absolute; 
top:1000px; 
width:100%; 
height:10px; 
background-color:#000000;   
} 

#offscreen{ 
position:absolute; 
width:100%; 
height:100%; 
z-index:1200; 
background-color:#000000; 
right:-100%; 
top:0; 
} 

如何確保用戶不能手動水平移動頁面？ overflow-x:hidden對身體（或包裝div）不起作用...似乎是導致問題的垂直滾動。

Answer 1

這可以解決在你的身體內創建一個div包裝，並將overflow-x:hidden;應用到它。

Check this working fiddle（嘗試滾動它）。

.wrapper { 
    overflow-x:hidden; 
}