jQuery Bootstrap 仅滚动一个 div 并将其他内容保留在顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23563669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap scrolling just a div and keep other content on top
提问by goodguy_cakephp
A bit like facebook. I've 4 columns and i want that scroll just work on one of that columns content.
有点像脸书。我有 4 列，我希望该滚动仅适用于该列内容之一。
I've read arround that I should set height on body to 100% and then fix height on that div that I want to scroll. No success yet.
我读过周围说我应该将 body 的高度设置为 100%，然后在我想要滚动的那个 div 上固定高度。还没有成功。
<div class="col-lg-12">
<div class="col-lg-2"></div>
<div class="col-lg-6"></div> <!-- div that I want scroll -->
<div class="col-lg-1"></div>
<div class="col-lg-3"></div>
</div>
回答by Sander Schaeffer
To scroll the div along with the page, when the user scrolls, use
要与页面一起滚动 div，当用户滚动时，使用
.col-lg-6 {
position:fixed;
}
To have the content within that column scrollable, use
要使该列中的内容可滚动，请使用
.col-lg-6 {
height: 200px; // Set this height to the appropriate size
overflow-y: scroll; // Only add scroll to vertical column
}
If this does not solve your problem, please update your question and clarify it. :)
如果这不能解决您的问题，请更新您的问题并加以澄清。:)
"I've read arround that I should set height on body to 100% and then fix height on that div that I want to scroll"- You don't necessary have to have a 100% body height to get this working. However, you should have a static height on the column if you want the content inside scrollable. If you just want to have the column fixed on the page, as said in the first of my two suggestions, you don't need a height specified. That's why it's only written in the second solution.
“我已经读过，我应该将身体的高度设置为 100%，然后在我想要滚动的那个 div 上固定高度”- 你不必有 100% 的身体高度来让它工作。但是，如果您希望内容可滚动，则列上应该有一个静态高度。如果您只想将列固定在页面上，如我的两个建议中的第一个所述，您不需要指定高度。这就是为什么它只写在第二个解决方案中。
回答by Daniel van Flymen
You should not override the Bootstrap classes explicity, rather add a class to your div and style that:
您不应该明确覆盖 Bootstrap 类，而是向您的 div 和样式添加一个类：
<div class="col-lg-12">
<div class="col-lg-2"></div>
<div class="col-lg-6 h-scroll"></div>
<div class="col-lg-1"></div>
<div class="col-lg-3"></div>
</div>
Then your css would look like:
然后你的 css 看起来像：
.h-scroll {
height: 90vh; /* %-height of the viewport */
position: fixed;
overflow-y: scroll;
}
If you want to mimic Facebook, it is better to use viewport units (vh, vwinstead of hard-setting the height in pixels. You can check the compatibility here.
如果您想模仿 Facebook，最好使用视口单位 ( vh，vw而不是以像素为单位硬设置高度。您可以在此处检查兼容性。
