避免滚动到画布外的内容

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; 
} 

您可以根据您的CSS在更大屏幕上的主要内容占据宽度的100％有

.site-wrapper { 
width:100%; 
} 

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

通过在身体上添加overflow-x:hidden;它将滚动条。

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

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

是更好，但事情是与你的头-behaves一点点奇怪，当我加入这个属性。