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

【问题标题】：jQuery How do I prevent the animation from resetting the scroll of the div?jQuery 如何防止动画重置 div 的滚动？
【发布时间】：2013-02-16 00:19:53
【问题描述】：

如果我使用 jQuery 动画函数将 #wrapper div (z-index:2) 向右滑动并在其后面显示一个 #menu div (z-index:1)，则 #wrapper div 重置是滚动用户已经在上面做了。

Here's the jsFiddle showing the problem。如果您滚动#wrapper div（带有“Main #”的那个），然后单击“打开/关闭菜单”链接以激活动画，滚动将重置。我知道这是由position:fixed 引起的，但这是必要的，以便在打开菜单时，唯一滚动的 div 是#menu 的 div 而不是 #wrapper 的 div。

我尝试在激活动画的按钮上使用href="javascript:void(0)"，在点击功能上使用return false;。没有任何效果。

如何禁用#wrapper div 重置滚动条？要么 #menu div 显示后如何锁定#wrapper div 滚动？

【问题讨论】：

去掉这行 $('#wrapper').css("position", "fixed");并且工作正常。
当菜单显示时，#wrapper div 上的滚动需要被禁用，因此用户不能以任何方式滚动它（滚动条、鼠标滚轮或手指在触摸屏上滑动） .有没有其他方法可以锁定#wrapper div 的滚动？

标签： jquery animation scroll reset

【解决方案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 的重新定位和滚动，这使得动画看起来很可怕。如果您正在为桌面设计或为移动设计但重视功能而不是美观，这是一个很好的方法。我没有在平板电脑上测试过。

【讨论】：