独有Fomantic-UIAngular-JS侧栏scoll

问题描述

是否有一种方法可以使边栏从其推送的内容中独立滚动？

现在我在此功能页面中设置了一个页面：

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

我在标题中具有的按钮可切换侧栏，当它可见时，它将与页面的主要内容一起滚动。我想避免这种情况的发生，因此，如果有人可以告诉我我该怎么做，将不胜感激。

下面是我的HTML的基本结构（我无法发布实际代码，请原谅我）

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

用于初始化Java侧边栏的代码

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

我尝试使侧栏和/或主要内容具有粘性。尝试使用CSS给他们固定的位置。也许有些其他我无法记住的事情，但没有任何事情像我希望的那样真正起作用。

解决方法

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