Wielo-kolumnowe przewijanie w pionie w CSS/JavaScript

Question

Obecnie istnieje sposób na przewijanie wielokolumnowe w CSS lub CSS z JavaScript?

opisać, co mam na myśli to, mam skonfigurować szybki demo na jsfiddle:

http://jsfiddle.net/S7AGp/

Kiedy zbyt dużo tekstu w div, chciałbym móc przewijać w pionie , z nowym tekstem pochodzącym od dołu po prawej stronie kolumny i starym tekstem wychodzącym ponad lewą kolumną najbardziej - Zasadniczo, podobnie jak obszar tekstowy, z wyjątkiem dwóch kolumn.

Zamiast tego, tworzy się dodatkowe kolumny, do których należy przewijać poziomo.

Podczas gdy mógłbym spróbować zapisać każdą linię tekstu w tablicy, a następnie zmienić ją na przewijanie, byłam ciekawa, czy istnieje już sposób, aby to zrobić w zwykłym CSS lub jeśli rozwiązanie istnieje już za pośrednictwem JavaScript. Dzięki!

Answer 1

myślę prosicie o somthing jak regionach 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; 
} 

Wspierają ogranicza teraz na WebKit : http://caniuse.com/css-regions

Niestety nie znam żadnego zastępczego lub zastępczego.

Answer 2

Źle:
Szybkie spróbować z pozycjonowania bezwzględnego: http://jsfiddle.net/PhilippeVay/S7AGp/1/, z ideą przy użyciu bottom: 0; do pozycji dno tekstu na dnie pojemnika.

Nie działa, ponieważ pozycjonowanie bezwzględne usuwa zawartość z przepływu i nie ma w nim nic (np. Nie przesuwasz elementu pozycjonowanego absolutnie za pomocą paska przewijania afaik).

Dobre: ​​
Tak oto solution using scrollTop().

Uwaga: użyłem jQuery ale ten powinien być w JS, jeśli nie używasz jQuery lub innego ramy gdzie indziej w projekcie

Answer 3

CSS Kolumny z pionowym przewijaniem.

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