Suppose, I have 3 columns. I want to add different type content into the columns. Then I want to scroll single columns without scrolling others column (As like Facebook)? How can I do it?
1 Answers
If you have 3 containers next to each other- it is possible. If table with 3 columns- I think not possible without rewriting.
So for 3 separate divs- make them inline-block (prevent next line) and add width. Set the overflow to auto. You can also add the height.
Ugly snippet follows.
#left {
width:30vw;
height:100vh;
display:inline-block;
overflow:auto;
}
#center {
width:30vw;
height:100vh;
display:inline-block;
overflow:auto;
}
#right {
width:30vw;
height:100vh;
display:inline-block;
overflow:auto;
} <div id="left">
left <br>left <br>left <br>left <br>more left <br>
left <br>left <br>left <br>left <br>more left <br>
left <br>left <br>left <br>left <br>more left <br>
left <br>left <br>left <br>left <br>more left <br>
left <br>left <br>left <br>left <br>more left <br>
left <br>left <br>left <br>left <br>more left <br>
</div>
<div id="center">
center </br>center </br>center </br>center </br>center </br>center </br>center </br>
more center </br>center </br>center </br>center </br>center </br>center </br>center </br>
some more center </br>center </br>center </br>
center </br>center </br>center </br>center </br>center </br>center </br>center </br>
more center </br>center </br>center </br>center </br>center </br>center </br>center </br>
some more center </br>center </br>center </br>
center </br>center </br>center </br>center </br>center </br>center </br>center </br>
more center </br>center </br>center </br>center </br>center </br>center </br>center </br>
some more center </br>center </br>center </br>
</div>
<div id="right">
right <br>right <br>right <br>more right <br>right <br>right <br>
right <br>more right <br>right <br>right <br>right <br>
more right <br>right <br>right <br>right <br>more right <br>
right <br>right <br>right <br>more right <br>right <br>
right <br>right <br>more right <br>right <br>right <br>
more right <br>right <br>right <br>right <br>more right <br>
right <br>right <br>right <br>more right <br>right <br>
right <br>right <br>more right <br>right <br>
right <br>right <br>more right <br>
</div>Related