Question

如果我使用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滚动？

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

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

1 个答案: