How to make scrollable DIV with scrollbar outside div like on facebook?
I would like to has a scrollable div but scrollbar should be on the right side of browser as default (but not on the right side of div). I've seen that on facebook (ceter div - contentArea is scrolled by right side browser开发者_JAVA技巧 scrollbar).
The way Facebook does it is by having all the content that doesn't scroll have a position of fixed. This way the native browser scrollbar will appear to scroll the center area only, while it's actually the rest of the page that is fixed in position.
A very simple example of this:
http://jsfiddle.net/tcaVN/
Now imagine the above, but with all non-scrollable items setup like the #header.
EDIT
Here is a slightly more complex example, with three columns:
http://jsfiddle.net/tcaVN/1/
Actually, the div your are talking about is not scrollable, the other div elements are fixed
That gives you the impression the scrollbar is outside the div, while you are actually scrolling the whole page, the left and right div elements are fixed. i.e: by using the style position: fixed;
I hope this helps a lot... see what you can do from here, i tried to comment on the code as much as possible...
<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>
A simple way I have found is:
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scoll;
}
For some reason this displays the scroll bar outside the div
加载中,请稍侯......
精彩评论