边栏实现允许过多的垂直滚动

Question

This is a sidebar implementation for Bootstrap.

但是，如果您在移动设备中打开它或在Chrome中模拟它。您可以注意到，您可以滚动到左侧以及向下滚动到页面之外的位置。无法弄清楚导致它的原因以及如何解决它。

基本问题是如何禁用多余的垂直滚动，红利问题是阻止水平滚动。

编辑：iOS模拟器上不会出现问题。在Chrome调试和Android手机中看到。

Answer 1

现在尝试使用iOS Chrome，iOS Simulater，Safari - 滚动或溢出没问题。

现在尝试在Mac OS X上使用Chrome，将调试工具设置为移动设备（哪一个无关紧要）并面临此问题：

我会回过头来修复此问题，或者可能已经为移动设备/机器人上的Chrome添加了一个问题。 overflow:hidden，overflow-y:hidden以及整个wrapper与overflow:hidden的新div并不能解决此问题。

<强>更新 从position:absolute中移除#wrapper.toggled #page-content-wrapper将删除该问题，但会导致正确的内容div丢失其宽度。如果您现在添加新的附加min-width，则会出现相同的高度计算问题。它看起来有点像真正的Chrome Bug，因为只有在Chrome浏览器中用于较小的屏幕才能在Safari（移动+桌面）或Firefox（移动+桌面）中出现。

Answer 2

如果在导航打开时隐藏溢出怎么办？

#wrapper.toggled {
    overflow: hidden;
}

将page-content-wrapper的位置更改为relative

#wrapper.toggled #page-content-wrapper {
    position: relative;
}

Answer 3

要删除菜单上多余的垂直滚动：

.sidebar-wrapper {
  overflow-y: hidden;
}

删除水平滚动：

body {
  overflow-x: hidden;
}