如何让网页上的右滚动条只滚动中间窗格 [英] how to have the right scrollbar on a web page scroll only the middle pane
问题描述
如果你看看facebook的消息页面，有一个标题，下面有三个部分。滚动条控制中间部分，左和右部分保持静止。如何在我的网页上实现相同的行为？这是一切都保持固定，滚动条只控制中间部分？顺便说一句，Facebook的实现在Chrome中不能正常工作，当Firebug打开时，FF停止工作。
If you look at messages page in facebook, there is a header and below it there are three sections. The scroll bar controls the middle section and the left and right sections remain static. How do I implement the same behavior on my webpage? That is everything remains fixed and the scroll bar only controls the middle section? By the way, Facebook's implementation does not work properly in Chrome and in FF stops working when Firebug is turned on.
推荐答案
不需要在中心部分设置任何特殊的。您想要保持固定的每个块元素需要具有 position：fixed;
You don't need to set anything special on the center section. Every block element you want to remain stationary needs to have position: fixed;.
例如
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
header {
display: block;
position: fixed;
z-index: 10; /* keeps the header over the content as the content gets scrolled */
top: 0;
width: 100%;
height: 100px;
padding: 10px;
background-color: black;
}
#sidebar {
position: fixed;
top: 120px; /* add height + padding of header */
left: 0;
width: 150px;
padding: 10px;
background-color: blue;
}
#content {
margin: 120px 0 0 170px; /* add adjacent elements' size + padding */
padding: 10px;
}
</style>
</head>
<body>
<header>
This will stay on the top of the browser window.
</header>
<div id="sidebar">
This will stay on the left.
</div>
<div id="content">
This will scroll normally.
</div>
</body>
</html>
这篇关于如何让网页上的右滚动条只滚动中间窗格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
