滑出菜单 - 在转换过程中隐藏水平滚动条

Question

我正在尝试创建一个幻灯片响应式菜单，它的工作效果非常好（至少在Chrome中）。

我遇到了一个问题。基本上，当您单击菜单按钮时，菜单将滑出，主体将向右移动（保持其宽度）并且看起来很棒。当你滑回时会出现问题 - jQuery删除了隐藏水平滚动条的类，当菜单滑出屏幕时，它会导致滚动条闪烁。

隐藏滚动条的类/ CSS如下所示：

.mob-menu-open {
    margin-left: 260px;
    height: 100%;
    overflow: hidden;
  }

这一点jQuery删除了这个类：

$('body').toggleClass('mob-menu-open');

我已经设置了一个JSFiddle来演示这个问题：http://jsfiddle.net/tgxgT/

我正在尝试创建可以重用的东西，所以我不想使用包装器div，因为它并不总是存在。我已经想到了一个问题，即使用jQuery来完成动画并在完成回调后删除类，但如果可能的话我宁愿只坚持使用CSS。如果它不可行，那么我将沿着jQuery路线前进。

有什么方法可以解决这个小问题吗？

任何创意都非常受欢迎！

Answer 1

我不认为你想要使用身体标签。

我会将包装器设置为#wrapper { overflow: hidden; }，然后放置所有内容 在具有指定宽度的div内移动，例如.content {width: 100%;}只需移动.content div。

我和你的jsFiddle一起玩了一个例子：http://jsfiddle.net/EfG2m/ 在那里我将顶部栏和菜单放在内容中，因为它们随着div移动。如果您希望将它们固定在顶部，将它们放在外面并单独为它们设置动画。

我希望这或多或少清楚......