मैं निश्चित-ऊंचाई div के नीचे सामग्री को कैसे जोड़ सकता हूं और इसे ओवरफ़्लो-वाई: स्क्रॉल कर सकता हूं?

Question

सवाल सुंदर पूरी तरह से यह बताते हैं, लेकिन यहाँ कुछ अधिक विस्तार से बताया:

1. मैं एक निश्चित ऊंचाई के साथ एक div है।
2. सामग्री अजाक्स के माध्यम से गतिशील रूप से लोड की जाती है और div में जोड़ दी जाती है।

जोड़ा गया सामग्री हमेशा div के नीचे स्थित है।

2 सामग्री के टुकड़ों (कोई अभी तक स्क्रॉल)

-------------------------div-- 
|       | 
|       | 
|       | 
|       | 
| some content (10:00 am) | 
|       | 
| some content (10:03 am) | 
------------------------------ 

अतिरिक्त सामग्री को मौजूदा सामग्री div शुरू होता है जब तक y-दिशा में स्क्रॉल करने के लिए धक्का। सामग्री के

5 टुकड़े (1 आइटम स्क्रॉल)

-------------------------div-- 
| some content (10:03 am) ^| 
|       | 
| some content (10:04 am) #| 
|       #| 
| some content (10:07 am) #| 
|       #| 
| some content (10:09 am) v| 
------------------------------ 

इस सीएसएस के साथ किया जा सकता है?

संपादित

इंटरनेट एक्सप्लोरर में काम करना चाहिए!

Answer 1

मुझे लगता है कि आपको scrollTop को scrollHeight पर प्रत्येक संलग्न करने के बाद स्क्रॉलिंग भाग करने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी। मेरे दोस्त Eric Pascarello posted a solution काफी समय पहले।

हो रही है यह खड़ी नीचे करने के लिए तैनात

<div id="test"> 
    <div class="bottom"> 
    <p>Test1</p> 
    <p>Test2</p> 
    <p>Test3</p> 
    <p>Test4</p> 
    <p>Test5</p> 
    <p>Test6</p> 
    <p>Test7</p> 
    <p>Test8</p> 
    <p>Test9</p> 
    </div> 
</div> 


#test 
{ 
    background:green; 
    height:100px; 
    position:relative; 
} 

#test .bottom 
{ 
    bottom:0px; 
    max-height:100px; 
    overflow:auto; 
    position:absolute; 
    width:100%; 
} 

#test p 
{ 
    margin:0; 
} 

Answer 2

इस कोड फ़ायरफ़ॉक्स और क्रोम में मेरे लिए काम करता एक चुनौती के कुछ भी है, लेकिन निम्न सीएसएस यह करना चाहिए ...। यह केवल मानक मोड के तहत आईई (7 और 8) में काम करता है।

<style> 
.outer { 
    width: 200px; 
    height: 200px; 
    position: relative; 
    border: 2px solid #ccc; 
} 
.inner { 
    width: 200px; 
    max-height: 200px; 
    position: absolute; 
    bottom: 0; 
    overflow: auto; 
    background: yellow; 
} 
</style> 


<div class="outer"> 
    <div class="inner"> 
     text<br /> 
     text<br /> 
     text<br /> 
     text<br /> 
    </div> 
</div>