防止水平滚动

Question

我有一个从屏幕外滑入的菜单。没有水平滚动条显示，但您仍然可以手动滑动屏幕（在IE和Chrome中，而不是Firefox），并在水平溢出中看到屏幕外的div。显然，我真的希望它隐藏起来。

可以在https://jsfiddle.net/7g0x96hs/及以下地方看到一个简单示例（没有用于使屏幕外div滑入的javascript）：

<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：隐藏在正文（或包装div）上并不起作用......似乎是引起问题的垂直滚动。

谢谢！