Javascript 移动导航处于活动状态时防止滚动的最佳方法是什么？

我正在努力寻找最好的技术来为我正在工作的移动站点显示导航/菜单。到目前为止，我所有的解决方案都有缺陷，我想知道是否有人能为我指明正确的方向。（您可能必须减小浏览器窗口大小，以使示例按预期工作）

首先，看看这个“基本”示例：

当导航打开时，您会注意到内容仍然可以滚动。这令人困惑和恼火

我的第一次修复尝试是在导航打开时将主体设置为overflow:hidden和position:fixed。示例：（必须删除链接，因为帖子中最多有2个链接）

但是，这会导致主体弹回到顶部，“忘记”其滚动位置。这意味着无论何时打开导航，都会将您带回页面顶部。不太好

最后，到目前为止，我最好的解决方案是将所有页面内容放在一个#滚动区域div中，固定位置占据大部分屏幕，主体滚动设置为隐藏。此处示例：

这解决了页面本身的大部分问题，但却破坏了后退按钮的“内存”。这意味着，每当您在浏览器中单击“后退”时，您都会被带到页面顶部，而不是返回到您决定单击链接之前的位置。（MobileSafari似乎是唯一能记住div和body上滚动位置的浏览器）

我真的想不出更多的解决方案，除了一些javascript是否有人有类似案例的经验，或者对如何做到这一点有什么想法？

解决方案必须：

• 当导航打开时，防止在页面内容上滚动
• 导航打开时保留页面内容上的滚动位置
• 使用“后退”按钮时，请记住上一页上的滚动位置