如何在 facebook 上使用 div 外的滚动条制作可滚动的 DIV？答案

【问题标题】：How to make scrollable DIV with scrollbar outside div like on facebook?如何在 facebook 上使用 div 外的滚动条制作可滚动的 DIV？
【发布时间】：2011-07-01 09:12:37
【问题描述】：

我想要一个可滚动的 div，但滚动条默认应该在浏览器的右侧（而不是在 div 的右侧）。我在 facebook 上看到过（ceter div - contentArea 由右侧浏览器滚动条滚动）。

【问题讨论】：

标签： html css scrollable

【解决方案1】：

Facebook 的做法是让所有不滚动的内容都有一个position 或fixed。这样，本机浏览器滚动条看起来只滚动中心区域，而实际上它是固定位置的页面其余部分。

一个非常简单的例子：

http://jsfiddle.net/tcaVN/

现在想象一下上面的情况，但所有不可滚动的项目都设置为#header。

编辑

这是一个稍微复杂一些的例子，有三列：

http://jsfiddle.net/tcaVN/1/

【讨论】：

【解决方案2】：

其实你说的div是不可滚动的，其他div元素是固定的

这给您的印象是滚动条在 div 之外，而您实际上是在滚动整个页面时，左右 div 元素是固定的。即：使用样式position: fixed;

【讨论】：

我认为您的意思是 position: fixed; 而不是 absolute。
不，fixed 相对于窗口定位，absolute 相对于文档定位。如果你给“固定”的 div 一个absolute 的位置，它们仍然会随着页面的其余部分滚动。 jsfiddle.net/tcaVN/2
嘿，我的刷新很幸运：3
一个小修正：position: absolute 元素实际上是相对于包含它们的最里面的position: relative 元素定位的。如果没有，则它们相对于窗口定位。

【解决方案3】：

我希望这对您有很大帮助...看看您可以从这里做什么，我尝试尽可能多地评论代码...

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

【讨论】：

【解决方案4】：

我发现的一个简单方法是：

#divID{
overflow: hidden;
width: calc(1024px + 0);
}

#divID:hover{
overflow-y:scoll;
}

由于某种原因，这会在 div 外显示滚动条

【讨论】：