Menu
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 scrollbar).
922
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
To fit all the text inside the div, the single-direction scrolling method will be used. You can apply it by placing the overflow-y:scroll in the id growth inside the style tag. Notice the scroll bar on the right side of the div .
In HTML, there is a division container - or <div></div> - that can encapsulate HTML data and elements. This data can then be manipulated using CSS styling and JavaScript. Among other features, you can also add a scrollbar to your div container with CSS.
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
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/
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
