jQuery如何防止动画重置div的滚动？

Question

如果我使用jQuery动画函数向右滑动一个#wrapper div (z-index:2)，并在它后面显示一个#menu div (z-index:1)，那么#wrapper div重置就是用户在它上面所做的滚动。

Here's the jsFiddle showing the problem。如果你滚动#wrapper div (带有"Main #“的那个)，然后点击"Open/Close Menu”链接激活动画，滚动就会重置。我知道这是由position:fixed引起的，但这是必要的，这样当菜单打开时，滚动的唯一div是# menu的div，而不是#wrapper的div。

我尝试过在激活动画的按钮上使用href="javascript:void(0)"，在点击功能上使用return false;。毫无办法。

如何禁止#wrapper div重置滚动？或者，一旦显示#menu div，我如何锁定#wrapper div滚动？

Answer 1

在.Click()回调函数中使用return false阻止了div的滚动，但不幸的是，它也强制两个div具有相同的滚动量。期望的效果是让每个div拥有并保持其自己的滚动量，直到用户重新加载页面。

我通过保存两个div上的滚动量并在动画回调函数中恢复它们，解决了这个问题。这是一个显示我的方法的jsFiddle。

尽管这在桌面浏览器中可以无缝地工作，但是

menu.css("position","fixed");
content.css("position","absolute").css("top","0");
window.scrollTo(0,contentScroll);

和

menu.css("top","0");
window.scrollTo(0,menuScroll);

在移动浏览器中速度非常慢，以至于你可以看到div的重新定位和滚动，这使得动画看起来很糟糕。如果你是为桌面设计或为移动设计，但更看重功能而不是美观，这是一个很好的方法。我没有在平板电脑上测试它。