javascript - 如果切换了侧边栏，则停止滚动/多余空间

Question

我遇到了一个奇怪的问题，即在移动设备 View 中切换侧边栏菜单时会出现多余的空间 - 如下所示。

我正在使用的模板似乎有问题，您可以在此处查看:

实时预览:

http://blackrockdigital.github.io/startbootstrap-simple-sidebar/

源代码:

http://startbootstrap.com/template-overviews/simple-sidebar/

我已经在多个元素上尝试了 overflow-y: hidden 但无济于事。我也试过调整 html,body{} 的大小，但没有成功。我不确定是什么导致了多余的空间。

侧边栏设置为 height:100%。 background-colour 停止在它应该的位置，让我认为这是侧边栏的边距或填充问题。也许不会。

非常感谢您的帮助。

Answer 1

这似乎是 #wrapper 中使用的 padding-left 造成的错误。

但是这个动画的实现非常奇怪。

您可以通过简单地添加 position:relative 并将 padding-left 替换为 left 来解决此问题。

要替换的代码:

#wrapper {
    position:relative;
    left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
   left: 250px;
}

I made an example一种更好的方法来实现相同的目标并避免您的实现可能带来的 future 问题。