Я хотел бы иметь прокручиваемый div, но полоса прокрутки должна быть в правой части браузера по умолчанию (но не в правой части div). Я видел это на facebook (ceter div - contentArea прокручивается правой полосой прокрутки браузера).
Как сделать прокручиваемую DIV с полосой прокрутки за пределами div, как на facebook?
Ответ 1
То, как Facebook делает это, имея все содержимое, которое не прокручивается, имеет position
of fixed
. Таким образом, встроенная полоса прокрутки браузера будет отображаться только для центральной области, тогда как на самом деле остальная часть страницы фиксируется в позиции.
Очень простой пример:
Теперь представьте выше, но со всеми параметрами, которые не прокручиваются, как #header
.
ИЗМЕНИТЬ
Вот несколько более сложный пример с тремя столбцами:
Ответ 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