0

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

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

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

如何禁用#wrapper div 重置滚动？或如何在#menu div 显示后锁定#wrapper div 滚动？

4

1 回答 1

0

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

于 2013-02-26T12:54:30.813 回答