स्क्रॉल overflowed DIVs जावास्क्रिप्ट

Question

साथ मैं एक div अतिप्रवाह का उपयोग करता है मिल गया है। मैं सर्वर से पाठ की पंक्तियों को पुनः प्राप्त करने के लिए कुछ AJAX का उपयोग कर रहा हूं, फिर उन्हें div के अंत में जोड़ दें, इसलिए सामग्री नीचे की ओर बढ़ रही है। हर बार ऐसा होता है, मैं div को नीचे स्क्रॉल करने के लिए जेएस का उपयोग करना चाहता हूं ताकि सबसे हाल ही में जोड़ा गया सामग्री दिखाई दे, जैसा चैट रूम या कमांड लाइन कंसोल काम करेगा।

अब तक मैं इस स्निपेट का उपयोग करके किया गया है यह करने के लिए (मैं भी jQuery, इसलिए $() फ़ंक्शन का उपयोग कर रहा):

$("#thediv").scrollTop = $("#thediv").scrollHeight; 

हालांकि यह मेरे असंगत परिणाम दे रहा है। कभी-कभी यह काम करता है, कभी-कभी नहीं, और यदि उपयोगकर्ता कभी भी div का आकार बदलता है या स्क्रॉल बार को मैन्युअल रूप से ले जाता है तो यह पूरी तरह से काम करता है।

लक्ष्य ब्राउज़र फ़ायरफ़ॉक्स 3 है, और यह एक नियंत्रित वातावरण में तैनात किया जा रहा है तो यह बिल्कुल IE में काम करने की जरूरत नहीं है।

कोई विचार विचार लोग? यह मुझे फंस गया है। धन्यवाद!

Answer 1

scrollHeight सामग्री की कुल ऊंचाई होना चाहिए। scrollTop उस सामग्री में पिक्सेल ऑफसेट को तत्व के क्लाइंट क्षेत्र के शीर्ष पर प्रदर्शित करने के लिए निर्दिष्ट करता है।

तो तुम सच में (अब भी jQuery का उपयोग) हैं:

$("#thediv").each(function() 
{ 
    // certain browsers have a bug such that scrollHeight is too small 
    // when content does not fill the client area of the element 
    var scrollHeight = Math.max(this.scrollHeight, this.clientHeight); 
    this.scrollTop = scrollHeight - this.clientHeight; 
}); 

... जो पुस्तक सामग्री की अंतिम clientHeight लायक करने के लिए ऑफसेट सेट हो जाएगा।

Answer 2

एक तत्व के एक jQuery से अधिक पुनरावृति करने के लिए एक पाश का उपयोग करना काफी अक्षम है। आईडी चुनते समय, आप प्राप्त() या [] नोटेशन का उपयोग कर jQuery के पहले और अद्वितीय तत्व को पुनः प्राप्त कर सकते हैं।

var div = $("#thediv")[0]; 

// certain browsers have a bug such that scrollHeight is too small 
// when content does not fill the client area of the element 
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight); 
div.scrollTop = scrollHeight - div.clientHeight; 

Answer 3

scrollIntoView

scrollIntoView विधि स्क्रॉल दृश्य में तत्व।

Answer 4

$("#thediv").scrollTop($("#thediv")[0].scrollHeight); 

Answer 5

मैं एक div 3 divs कि चल रहे थे छोड़ दिया, और जिनकी सामग्री का आकार बदला जा रहा था लपेटकर था। जब आप इसे हल करने का प्रयास करते हैं तो यह div-wrapper के लिए फंकी-रंगीन सीमाओं/पृष्ठभूमि को चालू करने में मदद करता है। समस्या यह थी कि आकार का div-content div-wrapper के बाहर बह रहा था (और रैपर के नीचे सामग्री के क्षेत्र के नीचे ब्लेड)।

उपरोक्त @ शोग 9 के उत्तर का उपयोग करके हल किया गया। मेरी स्थिति के लिए आवेदन किया है, इस HTML लेआउट था:

<div id="div-wrapper"> 
    <div class="left-div"></div> 
    <div id="div-content" class="middle-div"> 
    Some short/sweet content that will be elongated by Jquery. 
    </div> 
    <div class="right-div"></div> 
</div> 

यह मेरा jQuery div-आवरण आकार बदलने के लिए किया गया था:

<script> 
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content"); 
//now I need to resize the div... 
var contentHeight = $('#div-content').prop('scrollHeight') 
$("#div-wrapper").height(contentHeight); 
</script> 

ध्यान दें करने के लिए, $ ('# div-सामग्री') .prop ('scrollHeight') उस ऊंचाई को उत्पन्न करता है जिसे रैपर को आकार बदलने की आवश्यकता होती है। इसके अलावा मैं स्क्रॉल हाइट को वास्तविक jQuery फ़ंक्शन प्राप्त करने के किसी भी अन्य तरीके से अनजान हूं; $ ('# Div-content') में से कोई भी नहीं। ScrollTop() और $ ('# div-content')। ऊंचाई वास्तविक सामग्री-ऊंचाई मानों का उत्पादन करेगी। उम्मीद है कि इससे वहां किसी को मदद मिलेगी!