CSS/JavaScriptで複数列垂直スクロール

Question

現在、CSSまたはCSSでJavaScriptを使用して複数列のスクロールを行う方法はありますか？

私はこれで何を意味するかを説明するために、私はjsfiddleのクイックデモ設定しました：あまりにも多くのテキストがdiv要素であるとき、私は垂直方向にスクロールできるようにしたいと思い

http://jsfiddle.net/S7AGp/

を新しいテキストが一番右の列の下から出てきて、古いテキストが一番左の列の上に出ています - 基本的には、2つの列を除いてテキスト領域のようです。

代わりに、水平方向にスクロールする必要がある余分な列が作成されます。

私は各テキスト行を配列に保存してスクロールでそれを変更しようとしましたが、既にプレーンCSSでこれを行う方法があるのか​​、JavaScriptを使って解決策が既に存在するのか不思議でした。ありがとう！

Answer 1

は、私はあなたが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：彼らはWebKitのに今限られているサポート

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

： http://caniuse.com/css-regions

私は不幸にも、フォールバックや交換についてはわかりません。

Answer 2

悪い：
クイックは、絶対位置としてみてください：http://jsfiddle.net/PhilippeVay/S7AGp/1/、容器の底にあるテキストの下に配置するbottom: 0;を使用してのアイデアを。

絶対配置ではフローからコンテンツが削除され、コンテナ内に何も残っていないため（たとえば、スクロールバーafaikで絶対配置された要素を移動しないなど）、機能しません。

グッド：
は、だからここsolution using scrollTop()です。

注：私はjQueryのを使用していますが、垂直スクロールで、プロジェクト内の他の場所で

Answer 3

CSS列をjQueryのか、別のフレームワークを使用しない場合は、この1は、JSにする必要があります。非常に興味深いようで、私はそれになります

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