Multi-Column Vertical Scrolling in CSS/JavaScript

Question

Presently, is there a way to do multi-column scrolling in CSS or CSS with JavaScript?

To describe what I mean by this, I've set up a quick demo on jsfiddle:

http://jsfiddle.net/S7AGp/

When too much text is in the div, I would like to be able to scroll vertically, with new text coming up from bottom of the right-most column, and the old text exiting above the left most column - Basically, like a text-area, except with two columns.

Instead, what happens is that it creates extra columns you have to to scroll horizontally for.

While I could try to store each line of text in an array, and then change that on scroll, I was curious if there is already a way to do this in plain CSS or if a solution already exists via JavaScript. Thanks!

Answer 1

CSS Columns with vertical scroll.

http://jsfiddle.net/MmLQL/3/

HTML

    <div runat="server" id="div_scroll">
       <div runat="server" id="div_columns">
          <p> Some text ...</p>
       </div>
    </div>

CSS

    #div_scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 1060px; /*modify to suit*/
    height: 340px; /*modify to suit*/
    }

    #div_columns
    {
    direction:ltr; /*column direction ltr or rtl - modify to suit*/
    columns: 3; /*number of columns - modify to suit*/
    overflow-y: hidden;
    overflow-x: hidden;
    width: 1000px; /*width of columns div has to be specified - modify to suit*/
    /* do not specify height parameter as it has to be unrestricted*/
    padding: 20px;  
    }