Html 如何像在facebook上一样使用div外的滚动条制作可滚动的DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6545894/
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
How to make scrollable DIV with scrollbar outside div like on facebook?
提问by latata
I would like to has a scrollable div but scrollbar should be on the right side of browser as default (but not on the right side of div). I've seen that on facebook (ceter div - contentArea is scrolled by right side browser scrollbar).
我想要一个可滚动的 div，但默认情况下滚动条应该在浏览器的右侧（而不是在 div 的右侧）。我在 facebook 上看到过（ceter div - contentArea 由右侧浏览器滚动条滚动）。
回答by Kokos
The way Facebook does it is by having all the content that doesn't scroll have a positionof fixed. This way the native browser scrollbar will appear to scroll the center area only, while it's actually the rest of the page that is fixed in position.
Facebook的做它的方法是让所有不滚动有内容position的fixed。这样，原生浏览器滚动条将显示为仅滚动中心区域，而实际上是固定位置的页面的其余部分。
A very simple example of this:
一个非常简单的例子：
Now imagine the above, but with all non-scrollable items setup like the #header.
现在想象一下上面的内容，但是所有不可滚动的项目都设置为#header.
EDIT
编辑
Here is a slightly more complex example, with three columns:
这是一个稍微复杂的示例，包含三列：
回答by Steven Ryssaert
Actually, the divyour are talking about is not scrollable, the other divelements are fixed
实际上，div您正在谈论的是不可滚动的，其他div元素是固定的
That gives you the impression the scrollbar is outside the div, while you are actually scrolling the whole page, the left and right div elements are fixed. i.e: by using the style position: fixed;
这给你的印象是滚动条在 div 之外，而你实际上是在滚动整个页面，左右 div 元素是固定的。即：通过使用样式position: fixed;
回答by Gary Mathis
I hope this helps a lot... see what you can do from here, i tried to comment on the code as much as possible...
我希望这有很大帮助......看看你可以从这里做什么，我试图尽可能多地评论代码......
<html>
<head>
<title>Example</title>
<style>
#head{
position:fixed; /* this will make the div stay in the same place */
width:100%; /* this will size the dive to the width of the window */
height: 42px; /* this will make the height of the div 42px */
top:0px; /* make sure the div is at the very top */
left:0px; /* make sure the div is as far left as possible */
background: #009933; /* this will make the background of the div into a green color */
}#head_slack{ /* we make this one the same size so no text is ever covered */
width:100%; /* make sure the width of the slack is 100% */
height: 42px; /* make sure the hight of the slack is the same as the head fixed */
}body{
margin: 0px; /* takes out the default white border around the page */
}#leftFixed{
width 150px; /* set the width the same as the with of the table data cell containing the div */
position: fixed; /* make sure it stays in place */
left: 0px; /* make sure the div is at the left */
top: 45px; /* make sure the div is below the head div */
}#rightFixed{
width 200px; /* set the width the same as the with of the table data cell containing the div */
position: fixed; /* make sure it stays in place */
right: 0px; /* make sure the div is at the right */
top: 45px; /* make sure the div is below the head div */
}
</style>
</head>
<body>
<div id="head">This is the fixed header</div>
<div id="head_slack">this is the header that takes the slack</div>
<table width="100%">
<tr>
<td width="150px" valign="top">
<div id="leftFixed">This is fixed content on the left</div>
</td>
<td>
This is the scrollable content
</td>
<td width="200px" valign="top">
<div id="rightFixed">this is fixed content on the right</div>
</td>
</tr>
</table>
</body>
</html>
回答by Edward Newsome
A simple way I have found is:
我发现的一个简单方法是：
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scoll;
}
For some reason this displays the scroll bar outside the div
出于某种原因，这会在 div 外显示滚动条
