让 Fomantic-UI (Angular-JS) 侧边栏独立滚动

Question

有没有办法让侧边栏独立于它推送的内容滚动？

现在我在这个时尚中设置了一个页面：

--------------------------
|[button]  Header        |
--------------------------
|S | Main content        |
|i |                     |
|d |                     |
|e |                     |
|b |                     |
|a |                     |
|r |                     |
--------------------------
| Footer                 |
--------------------------

我在 header 中的按钮可切换边栏，当它可见时，它将与页面的主要内容一起滚动。我想避免这种情况发生，所以如果有人能告诉我我必须做什么，我们将不胜感激。

下面是我的HTML的基本结构（我不会post实际代码所以请见谅）

<div class="ui segment pushable" style="margin-top:3.5em;" id="mainContent">
   <div class="ui inverted labeled icon left inline vertical sidebar menu" id="individual_messages_sidebar">
      <!-- side bar content here -->
   </div>
   <div class="pusher">
      <!-- Main Content -->
   </div>
</div>

初始化边栏的代码在Javascript

$('#individual_messages_sidebar')
   .sidebar({
      context: $('#mainContent')
   })
   .sidebar('setting', 'dimPage', false);

我试过将边栏 and/or 设为粘性主要内容。尝试用 CSS 给他们固定位置。也许还有其他一些我不记得的事情，但没有任何事情像我希望的那样真正奏效。

Answer 1

overflow 决定了你是否会有滚动条。你需要一个已知高度的容器，在里面你可以有一个高度很大的元素，并使用溢出来控制它。 Example

.slider {
  height:100%;
  overflow:auto;
}
.slider>div {
  background: #cddccd;
  width:130px;
  height:1000px;
}
.content {
  height:100%;
  overflow:auto;
  width:100%;
}
.content>div {
  background: #dccddc;
  width:100%;
  height:1000px;
}

让 Fomantic-UI (Angular-JS) 侧边栏独立滚动

Have Fomantic-UI (Angular-JS) sidebar scoll indipendantly

html

javascript

css

angularjs

fomantic-ui