Javascript Mobile Safari在菜单打开时防止身体滚动

我已经和这件事斗争了好几个星期了。我就是搞不懂

当菜单打开时，我试图阻止正文的水平滚动。这是一个完整的jsbin：

似乎任何解决方案都只会破坏我所希望的工作方式。因此，我将需求添加到jsbin中，以跟踪每个版本满足哪些需求

更新 也许这太好了，不可能是真的，但我想我已经满足了所有的要求，但我仍然需要检查android设备：

我学到了一件事，让我绊倒了这么久，但我没有意识到，那就是在Mobile Safari中

元素上的

溢出：隐藏
，不做蹲起！我必须移动我的样式以防止向下滚动一级元素

为我指明了正确的方向。我需要在我正在移动的元素的父元素上设置
overflow:hidden
，左：85%
，而不是元素本身（我试图在
上完成这一切）

所以我有一个
body>.container
，我在上面做
溢出：隐藏
和
body>.container>.content
，我用
position:relative
和
left:85%
推压它，你的问题更多的是一个设计规范，而不是一个问题，所以不要试图为你设计整个布局，我将指出您的jsbin不起作用的原因

不要试图将
左
设置在
body
上。如果
body
突出屏幕外，您将无法可靠地停止滚动

相反，保持
body
静止，保持100%的宽度和高度，这样它就可以作为可见的窗口边界。当您想锁定滚动时，可以在
body
上设置
overflow:hidden
。在正文中使用单独的div来处理幻灯片和滚动菜单。
我很难在正确的元素上找到正确的定位组合。您将定位哪些元素以及如何定位？另一个线索：
溢出：隐藏
上的
正文
在Mobile Safari（）中无法正常工作。但它在div（）上确实可以正常工作。