सीएसएस/जावास्क्रिप्ट में मल्टी-कॉलम वर्टिकल स्क्रॉलिंग

Question

वर्तमान में, जावास्क्रिप्ट के साथ सीएसएस या सीएसएस में बहु-स्तंभ स्क्रॉल करने का कोई तरीका है?

http://jsfiddle.net/S7AGp/

जब बहुत अधिक पाठ div में है, मैं खड़ी स्क्रॉल करने के लिए सक्षम होने के लिए करना चाहते हैं:

वर्णन करने के लिए क्या मैं इस से मतलब है, मैं jsfiddle पर एक त्वरित प्रदर्शन सेट कर लेते हैं , दाएं-अधिकतर कॉलम के नीचे से नया टेक्स्ट आ रहा है, और बाएं अधिकांश कॉलम से ऊपर पुराना पाठ - मूल रूप से, दो कॉलम को छोड़कर टेक्स्ट-क्षेत्र की तरह।

इसके बजाय, क्या होता है कि यह क्षैतिज रूप से स्क्रॉल करने के लिए अतिरिक्त कॉलम बनाता है।

जबकि मैं एक सरणी में पाठ की प्रत्येक पंक्ति को स्टोर करने का प्रयास कर सकता था, और उसके बाद स्क्रॉल पर इसे बदल सकता था, तो अगर मैं पहले से ही सीएसएस में ऐसा करने का कोई तरीका है या जावास्क्रिप्ट के माध्यम से कोई समाधान मौजूद है तो मैं उत्सुक था। धन्यवाद!

Answer 1

मुझे लगता है कि आप सीएसएस क्षेत्रों की तरह somthing के बारे में पूछ रहे हैं: 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> 

सीएसएस:

.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 का इस्तेमाल किया, लेकिन यह एक जे एस में होना चाहिए, यदि आप लंबवत स्क्रॉल के साथ अपनी परियोजना में कहीं और jQuery या किसी अन्य ढांचे का उपयोग नहीं करते

Answer 3

सीएसएस कॉलम।

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

एचटीएमएल

<div runat="server" id="div_scroll"> 
     <div runat="server" id="div_columns"> 
      <p> Some text ...</p> 
     </div> 
    </div> 

सीएसएस

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