Mehrspaltiges vertikales Scrollen in CSS/JavaScript

Question

Gibt es derzeit eine Möglichkeit, mehrspaltiges Scrollen in CSS oder CSS mit JavaScript durchzuführen?

Um zu beschreiben, was ich damit meine, ich habe eine kurze Demo auf jsfiddle einrichten:

http://jsfiddle.net/S7AGp/

Wenn zu viel Text in der div ist, würde ich vertikal in der Lage sein möchten blättern , wobei neuer Text vom unteren Rand der rechten Spalte kommt und der alte Text oberhalb der linken Spalte endet - Im Grunde wie ein Textbereich, außer mit zwei Spalten.

Stattdessen werden zusätzliche Spalten erstellt, für die horizontal gescrollt werden muss.

Während ich versuchen konnte, jede Textzeile in einem Array zu speichern, und dann bei scroll zu ändern, war ich neugierig, ob es bereits eine Möglichkeit gibt, dies in einfachem CSS zu tun oder wenn eine Lösung bereits über JavaScript existiert. Vielen Dank!

Answer 1

Ich glaube, Sie über somthing wie CSS Regionen fragen: 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; 
} 

Sie unterstützen jetzt beschränkt sich auf Webkit : http://caniuse.com/css-regions

Leider kenne ich keine Fallback oder Ersatz.

Answer 2

Bad:
Schnell Versuch mit absoluter Positionierung: http://jsfiddle.net/PhilippeVay/S7AGp/1/, mit der Idee der bottom: 0; mit der Unterseite des Textes am unteren Rande des Behälters zu positionieren.

Es funktioniert nicht, weil die absolute Positionierung seinen Inhalt aus dem Fluss entfernt und es nichts mehr im Container ist (z. B. bewegt man kein absolut positioniertes Element mit einer Bildlaufleiste afaik).

Gut:
Also hier ist ein solution using scrollTop().

Hinweis: Ich habe jQuery, aber dies sollte in JS, wenn Sie in Ihrem Projekt

Answer 3

CSS Spalten mit vertikalem Bildlauf verwenden jQuery oder einem anderen Rahmen an anderer Stelle nicht.

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