Как сделать прокручиваемую DIV с полосой прокрутки за пределами div, как на facebook?

Я хотел бы иметь прокручиваемый div, но полоса прокрутки должна быть в правой части браузера по умолчанию (но не в правой части div). Я видел это на facebook (ceter div - contentArea прокручивается правой полосой прокрутки браузера).

Ответ 1

То, как Facebook делает это, имея все содержимое, которое не прокручивается, имеет position of fixed. Таким образом, встроенная полоса прокрутки браузера будет отображаться только для центральной области, тогда как на самом деле остальная часть страницы фиксируется в позиции.

Очень простой пример:

http://jsfiddle.net/tcaVN/

Теперь представьте выше, но со всеми параметрами, которые не прокручиваются, как #header.

ИЗМЕНИТЬ

Вот несколько более сложный пример с тремя столбцами:

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

Ответ 2

На самом деле, div, о котором вы говорите, не прокручивается, остальные элементы div фиксированы

Это дает вам впечатление, что полоса прокрутки находится вне div, в то время как вы на самом деле прокручиваете всю страницу, левые и правые элементы div фиксированы. i.e: используя стиль position: fixed;

Ответ 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