的jsfiddle

Question

我正在构建一个Web应用程序，它将是桌面和移动版本之间的混合。

接口使用Bootstrap 3.0构建，并且max-width:767px接口切换到移动版

在桌面模式下，左侧的黑色侧边栏始终可见，在移动模式下，侧边栏不可见，用户可以在侧边栏之间切换打开/关闭

这可以按预期工作

在jsfiddle中有两个垂直的黑条，它们是内容的占位符..侧边栏中有一个，主窗口中有一个

当内容溢出时，如何在#menu中实现滚动条？可滚动区域必须具有100％的视口高度，具体取决于屏幕分辨率，使用鼠标滚轮时，它不得传播到正文

的jsfiddle

http://jsfiddle.net/gjvzn3rb/12/

Answer 1

如果您只想滚动菜单，请将#menu更改为以下内容：

#menu {
    position:absolute;
    margin-top:50px;
    width:100%;
    overflow: scroll;
    height: 100%;
}

http://jsfiddle.net/gjvzn3rb/15/

注意：当菜单滚动

时，徽标将保留在顶部

或者，如果您希望整个侧边栏滚动：

#sidebar { 
  overflow-y: scroll;
}

在侧边栏中添加overflow-y:scroll;，以便当它溢出时，您可以滚动它而不会滚动正文内容。

http://jsfiddle.net/gjvzn3rb/13/

Answer 2

你的意思是你想要滚动菜单吗？

您可以通过更改#menu css：

获得100％的身高并滚动

#menu {
  position:absolute;
  width:100%;
  top: 50px;
  bottom: 0;
  overflow-y: scroll;
}

如果您希望整个侧边栏滚动，可以使用（而不是上述）：

#sidebar {
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    bottom:0;
    width:200px;
    background:#1c2b36;
    color:#c4d0d9;
    box-sizing:border-box;
    overflow-y: scroll;
}

overflow-y: scroll;只允许上下滚动。

请注意，滚动不会传播到正文，直到到达顶部或底部。

Answer 3

如何在内容溢出时使HTML元素可滚动：

当内容以高度 / vertical：

溢出时创建滚动条

overflow-y: scroll;

当内容以宽度 /水平：

溢出时创建滚动条

overflow-x: scroll;

当内容溢出时出现滚动条宽度和高度：

overflow: scroll;

Answer 4

如果取出z-index：-1;并添加溢出：滚动;应该实现你想要做的事情。像这样：

#menu 
{
  position:absolute;    
  width:100%;
  padding-left:200px;
  height:100%;
  min-height:100%;
  box-sizing:border-box;
  background:#f0f3f4;
  overflow:scroll;
}

移动与桌面界面

的jsfiddle

4 个答案: