避免滚动到画布外的内容

Question

我正在做一个关于响应式设计的小教程，但是我遇到了一个问题。

我将使用从左侧滑入的经典非画布菜单，但是当我启用菜单时，我仍然可以水平滚动以查看全部内容，而不是使用菜单按钮来隐藏菜单。

请看下面的笔：

http://codepen.io/webconsult/pen/jmCit

请注意，codepen 隐藏了标签。对于我正在使用的元视口标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

我怀疑我应该以不同的方式设置视口标签？ 您可以通过单击 html 框架中的 settings-cog 来使用视口标签。

Answer 1

将此添加到您的 css 中

body {
overflow-x:hidden;
}

你有

.site-wrapper {
width:100%;
}

根据您在较大屏幕上的 CSS，主要内容占据 100% 的宽度。在较小的屏幕上，当您打开画布菜单时 - 它会产生水平滚动，因为您的 .site-wrapper+off canvas 占据了 100% 以上的宽度 -100% for warrper + 75% aside.navigation。

通过在正文上添加overflow-x:hidden;，它将滚动条。

虽然这不是最好的解决方案 - 有

.site-wrapper {
  overflow-x:hidden;
}

更好，但你的标题有些问题 - 当我添加这个属性时，表现有点奇怪。