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:

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;  
    }

Answer 2

Bad:
Quick try with absolute positioning: http://jsfiddle.net/PhilippeVay/S7AGp/1/ , with the idea of using bottom: 0; to position the bottom of text at the bottom of the container.

It doesn't work because absolute positioning removes its content from the flow and there's nothing left in the container (e.g. you don't move an absolutely positioned element with a scrollbar afaik).

Good:
So here's a solution using scrollTop().

Note: I used jQuery but this one should be in JS, if you don't use jQuery or another framework elsewhere in your project

Answer 3

I think you are asking about somthing like css regions: http://net.tutsplus.com/tutorials/html-css-techniques/diving-into-css-regions/

HTML:

<p class="example-text">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>

<div class="regions"></div>
<div class="regions"></div> 

CSS:

.example-text {
  -webkit-flow-into: example-text-flow;
  padding: 0;
  margin: 0;
}

.regions {
   -webkit-flow-from: example-text-flow;
   border: 1px solid black;
   padding: 2px;
   margin: 5px;
   width: 200px;
   height: 50px;
}

They support is limited right now to webkit: http://caniuse.com/css-regions

Unfortunatally I don't know of any fallback or replacement.