गतिशील रूप से एक Textarea स्क्रॉलिंग

Question

मेरे पास मेरे पृष्ठ पर एक टेक्स्टरेरा HTML तत्व है जो AJAX के माध्यम से पुनः लोड हो जाता है। पूरे टेक्स्टरी को हर बार अपनी सामग्री न केवल वापस किया जाता है, और सामग्री समय के साथ बढ़ती है। पाठ क्षेत्र के साथ-साथ मैं जावास्क्रिप्ट का निम्न भाग लौट:

<script type="text/javascript" > 

var textArea = document.getElementById('outputTextResultsArea'); 
textArea.scrollTop = textArea.scrollHeight; 
</script> 

फ़ायरफ़ॉक्स 3.0.7 में इस पाठ क्षेत्र के तल पर स्क्रॉल पट्टी देता है, मुझे उत्पादन के नवीनतम देखने के लिए अनुमति देता है। हालांकि आईई 7 में मैं अलग-अलग व्यवहार देखता हूं। स्क्रॉलबार उद्देश्य के साथ सामग्री के साथ नीचे चला जाता है, लेकिन एक बार सामग्री अधिक हो जाने पर टेक्स्टरिया ऊंचाई स्क्रॉल बार अब आगे नहीं बढ़ती है। ऐसा लगता है जैसे आईई तत्व की मूल स्क्रॉल ऊंचाई को याद कर रहा है, न कि नई ऊंचाई।

यदि मैं मदद करता हूं तो मैं xhtml संक्रमणकालीन डॉक्टरेट का उपयोग कर रहा हूं। इसके अलावा अगर यह jQuery के साथ हासिल किया जा सकता है जो ठीक होगा क्योंकि मेरे पास इसका उपयोग है।

अग्रिम धन्यवाद

नील

Answer 1

एक त्वरित हैक के रूप में आप सिर्फ यह कर सकते हैं:

textArea.scrollTop = 99999; 

एक अन्य विकल्प एक टाइमर में यह प्रयास करने के लिए है:

setTimeout(function() 
{ 
    var textArea = document.getElementById('outputTextResultsArea'); 
    textArea.scrollTop = textArea.scrollHeight; 
}, 10); 

Answer 2

टाइमआउट का उपयोग करने के बजाय, प्रत्येक AJAX प्रतिक्रिया पर उस फ़ंक्शन को कॉल करें - बशर्ते आप इसे ट्विक कर सकें।

इससे आपके ब्राउज़र को अनावश्यक टाइमआउट से मुक्त कर दिया जाएगा।

Answer 3

jQuery, $ ("textarea") का उपयोग करना। ScrollHeight (99 999) फ़ायरफ़ॉक्स और क्रोम पर बहुत अच्छा काम करता है लेकिन आईई पर नहीं। ऐसा लगता है कि इसे टेक्स्टरेरा में लाइनों की अधिकतम संख्या में सेट किया गया है, जबकि स्क्रोलहेइट को पिक्सल की संख्या माना जाता है। (बहुत बढ़िया शो महान काम आईई)। यह काम करने के लिए प्रतीत होता है:

 $("textarea").scrollTop(99999) 
     $("textarea").scrollTop($("textarea").scrollTop()*12) 

मुझे लगता है कि यह 12px फ़ॉन्ट-ऊंचाई मानता है। मुझे ऐसा करने के लिए एक और मजबूत/सीधा रास्ता खोजना अच्छा लगेगा।

Answer 4

मैं इंटरनेट एक्सप्लोरर के लिए इस का उपयोग कर समाप्त हो गया:

textArea.createTextRange().scrollIntoView(false); 

और इस अन्य ब्राउज़रों के लिए:

textArea.scrollTop = textArea.scrollHeight;