How to scroll a single column content without moving others column?

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?

Solution

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>