Desplazamiento vertical en varias columnas en CSS/JavaScript

Question

Actualmente, ¿hay alguna forma de realizar el desplazamiento en varias columnas en CSS o CSS con JavaScript?

para describir lo que quiero decir con esto, he creado una pequeña demostración en jsFiddle:

http://jsfiddle.net/S7AGp/

Cuando demasiado texto está en el div, me gustaría ser capaz de desplazarse verticalmente , con un nuevo texto que viene desde la parte inferior de la columna de la derecha y el texto anterior que sale por encima de la columna de la izquierda - Básicamente, como un área de texto, excepto con dos columnas.

En su lugar, lo que sucede es que crea columnas adicionales para desplazarse horizontalmente.

Si bien podría tratar de almacenar cada línea de texto en una matriz, y luego cambiar eso en desplazamiento, tenía curiosidad de si ya hay una manera de hacerlo en CSS simple o si ya existe una solución a través de JavaScript. ¡Gracias!

Answer 1

creo que usted está planteando algo como regiones css: 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; 
} 

Apoyan se limita ahora a webkit : http://caniuse.com/css-regions

Desafortunadamente no conozco ninguna alternativa o reemplazo.

Answer 2

malo:
try rápido con posicionamiento absoluto: http://jsfiddle.net/PhilippeVay/S7AGp/1/, con la idea de utilizar bottom: 0; para posicionar la parte inferior de texto en la parte inferior del recipiente.

No funciona porque el posicionamiento absoluto elimina su contenido del flujo y no queda nada en el contenedor (por ejemplo, no mueve un elemento absolutamente posicionado con una barra de desplazamiento afaik).

bueno:
Así que aquí hay un solution using scrollTop().

Nota: He utilizado jQuery pero éste debe estar en JS, si no se utiliza jQuery u otro marco en otra parte de su proyecto

Answer 3

Columnas CSS con desplazamiento vertical.

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