CSS/JavaScript'te Çoklu Sütun Dikey Kaydırma

Question

Şu anda, JavaScript ile CSS veya CSS'de çoklu sütun kaydırma yapmanın bir yolu var mı? çok fazla metin div olduğunda

http://jsfiddle.net/S7AGp/

, ben dikey kaydırma edebilmek istiyorum: Ben bu demek şeyi tanımlamak için

, ben jsfiddle hızlı bir demo kurdum En sağdaki sütunun en altından gelen yeni metin ve en soldaki sütundan çıkan eski metin ile - Temel olarak, iki sütun dışında bir metin alanı gibi. Bunun yerine, ne olacağı, yatay olarak kaydırmak için gereken fazladan sütunlar oluşturmasıdır.

Her bir metin dizisini bir dizide depolamayı ve sonra kaydırmayı değiştirmeyi deneyebilirken, bunu düz CSS'de veya bir çözüm zaten JavaScript aracılığıyla var ise zaten merak ediyorum. Teşekkürler!

Answer 1

Sana css bölgeler gibi somthing hakkında soruyorlar düşünüyorum: 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: Onlar webkit için hemen sınırlıdır destekleyen

.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

Talihsizce herhangi bir geri dönüş veya değiştirme bilmiyorum.

Answer 2

Kötü: http://jsfiddle.net/PhilippeVay/S7AGp/1/, kabın dibinde metnin altını konumlandırmak için bottom: 0; kullanma fikri ile: Mutlak konumlandırma ile
Hızlı deneyin.

Mutlak konumlandırma, içeriğini akıştan kaldırdığı ve kapta hiç bir şey kalmadığından (örneğin, tam olarak yerleştirilmiş bir öğeyi kaydırma çubuğuyla taşımadığınız için) çalışmaz.

iyi:
Yani burada bir solution using scrollTop() bu.

Not: jQuery kullanılan ancak dikey kaydırma ile projenizde başka yerde

Answer 3

CSS Sütun jQuery veya başka çerçeve kullanmak istemiyorsanız bu bir, JS olmalıdır.

http://jsfiddle.net/MmLQL/3/

HTML çok ilginç ve ben içine bakacağız görünüyor

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