我已经和这个东西斗争了好几个星期了。我就是想不通。
当菜单打开时，我试图阻止正文的水平滚动。这是一个完整的jsbin:
http://jsbin.com/vopeq/38/edit
似乎任何解决方案都只会取消其他按照我希望的方式工作的东西。所以我在jsbin中添加了需求，以跟踪每个版本都满足哪些需求。
更新
也许这太好了，不可能是真的，但我认为我已经满足了所有的要求，但我仍然需要检查android设备：
http://jsbin.com/vopeq/61
我学到的一件事，让我困惑了这么长时间，但我没有意识到，那就是在Mobile Safari中，<body>元素上的overflow: hidden不会蹲下！我不得不移动我的风格，以防止向下滚动一个级别的元素。
Ed4为我指明了正确的方向。我需要在我使用left: 85%移动的元素的父元素上设置overflow: hidden，而不是元素本身（我试图在<body>上完成所有操作）。
所以我有一个body > .container，我在上面做overflow: hidden和body > .container > .content，我用position: relative和left: 85%把它们推过去。
您的问题更像是一个设计规范，而不是一个问题，所以我不想为您设计整个布局，而是要指出为什么您的jsbin不起作用。
不要试图在body上设置left。如果body在屏幕外突出，您将无法可靠地停止滚动。
相反，保持body以100%的宽度和高度固定，这样它就可以作为您的可见窗口边界。当您想要锁定滚动时，可以将overflow: hidden设置为body。使用机身内部的独立div处理滑动和滚动菜单。