11

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

4

4 回答 4

12

Facebook 的做法是让所有不滚动的内容都有一个position. fixed这样，本机浏览器滚动条将显示为仅滚动中心区域，而实际上是固定位置的页面其余部分。

一个非常简单的例子：

http://jsfiddle.net/tcaVN/

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

编辑

这是一个稍微复杂的示例，包含三列：

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

于 2011-07-01T09:15:59.087 回答
2

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

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

于 2011-07-01T09:15:28.237 回答
1

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

<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>
于 2011-12-01T01:14:34.663 回答
0

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

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

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

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

于 2015-04-12T00:12:25.730 回答