[英]Have Fomantic-UI (Angular-JS) sidebar scoll indipendantly
Is there a method to get a sidebar to scroll indipendently from the content it pushes?有没有一种方法可以让侧边栏从它推送的内容中独立滚动?
Right now I have a page set up in this fasion:现在我有一个以这种方式设置的页面:
--------------------------
|[button] Header |
--------------------------
|S | Main content |
|i | |
|d | |
|e | |
|b | |
|a | |
|r | |
--------------------------
| Footer |
--------------------------
The button I have in the header toggles the sidebar and when it's visible it will scroll along with the Main Content of the page.我在 header 中的按钮切换侧边栏,当它可见时,它将与页面的主要内容一起滚动。 I would like to keep this from happening, so if anyone can tell what I have to do it would be appreciated.
我想防止这种情况发生,所以如果有人能告诉我必须做什么,我将不胜感激。
Below is the basic structure of my HTML (I can't post acttual code so please forgive me)以下是我的 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>
The code that initializes the sidebar in Javascript在 Javascript 中初始化侧边栏的代码
$('#individual_messages_sidebar')
.sidebar({
context: $('#mainContent')
})
.sidebar('setting', 'dimPage', false);
I've tried making the side bar and/or the main content sticky.我尝试让侧边栏和/或主要内容具有粘性。 Tried giving them fixed positions with CSS.
尝试使用 CSS 给他们固定位置。 Maybe some other things that I can't remmember, but nothing has really worked as I had hoped.
也许还有一些我不记得的其他事情,但没有什么像我希望的那样真正起作用。
overflow is what determines if you will have scroll bars.溢出是决定你是否会有滚动条的因素。 you need a container that has a known height and inside you can have an element that has massive height and use overflow to control it.
您需要一个具有已知高度的容器,并且在内部您可以拥有一个高度很大的元素并使用溢出来控制它。 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.