Question

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

Answer 1

Facebook的做法是让所有不滚动的内容都有position fixed。这样，本机浏览器滚动条似乎只会滚动中心区域，而实际上是固定在适当位置的页面的其余部分。

一个非常简单的例子：

http://jsfiddle.net/tcaVN/

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

修改

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

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

Answer 2

实际上，您正在谈论的div不可滚动，其他div元素是固定的

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

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

Answer 4

我找到的一个简单方法是：

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

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

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

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

4 个答案: