滑出式菜单 - 在过渡时隐藏水平滚动条答案

【问题标题】：Slideout Menu - Hiding Horizontal Scrollbar Whilst in Transition滑出式菜单 - 在过渡时隐藏水平滚动条
【发布时间】：2015-04-25 17:09:14
【问题描述】：

我正在尝试创建一个滑出式响应菜单，它运行得相当好（至少在 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 路线走。

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

非常欢迎任何有创意的想法！

【问题讨论】：

【解决方案1】：

我不认为你想玩太多的 body 标签。

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

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

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

【讨论】：